Using JS hook

[geoffreycrofte]

Hi there, Thank you for your amazing plugin.

I was trying to use JS hooks by following your example: https://github.com/fusioneng/Shortcake/wiki/Event-Attribute-Callbacks

My JS file is loaded successfully, just after the shortcode-ui.js file, thanks to your add_action( 'enqueue_shorcode_ui' ) like that:

add_action( 'enqueue_shortcode_ui', 'admin_scripts_for_shortcode_ui' );
function admin_scripts_for_shortcode_ui() { 
    wp_enqueue_script( 'my-shortcode-ui', MY_ADMIN_UI_JS_URL . 'shortcode-ui.js', array('shortcode-ui-js-hooks') );
}

My code is a little bit less complexe, it was just to test it:

function update_select_field( changed, collection, shortcode ) {
    console.log( changed );
    console.log( collection );
    console.log( shortcode );
}
wp.shortcake.hooks.addAction( 'zo-media.selectfield', update_select_field );

But nothing happened when I use my select field. zo-media is the name of the shortcode. Am I doing something wrong?

Finally, I would like to use JS hook to add Featured Images to post_select fields type. Is it possible or is there a better way to do so?

It's the first time I use JS hooks ^^ Thank you very much!

[goldenapples]

Thanks for the feedback, @creativejuiz.

I can't see offhand anything wrong with the code. Are you sure that selectfield is the attribute name of the field you want to listen to change events on?

Finally, I would like to use JS hook to add Featured Images to post_select fields type.

Are you talking about just changing the display of the Post Select field? That seems very feasible, to just update the markup of that field on any update events in the field.

[rebekah-sofo]

I'm having the exact same issue with this callback functionality. My test JS file is set up exactly the same way, with console logging for testing purposes, and it is being loaded successfully, but the callback function is just not being triggered. I even changed then copied and pasted the attribute name for the field into the JS file, and still nothing.

Is there a working example for the callback that I can compare to my test? On the Event Attribute Callbacks page, I followed all the instructions, but it doesn't seem to work. And the richtext.js example implementation doesn't include this particular callback setup, as far as I can tell.

[goldenapples]

Is there a working example for the callback that I can compare to my test?

Here's a couple examples which I use that work:

In Shortcake Bakery, there's a js hook which listens to changes on the googledocs.url field and shows different options depending on what type of document the URL is for.

In Protected Embeds, there's a js hook that fires when the shortcode UI is first rendered to set the protected-embed.id field as readonly, and load a preview of the embed contents.

About the initial issue reported, I wonder if it was related to the issue with select fields as reported in #668 - because of the way the Backbone view is set, a select field doesn't have a value set at all when it's first rendered, therefore the js hook won't be fired on first rendering that field (though it would on interacting with the field on updating the select box). That particular problem should be resolved by #673.

[vburlak]

@creativejuiz you need to replace selectfield with your field's name. For example: if your post_select has my_post_select_field name, action should looks so:

wp.shortcake.hooks.addAction( 'zo_media.my_post_select_field', update_select_field );