Using jQuery in widget development

Question

I'm working on a widget that do some magic with jQuery (slide,fades elements). The problem is that the jQuery script attached to widget is not called when I delete and then replace the widget in the sidebar .

Even If I have in the form function something like this :

public function form( $instance ) {

    wp_register_script('script', get_template_directory_uri() . '/script.js', array('jquery'), null, true);
    wp_enqueue_script('script');
}

The script is present in the page (If I view source it is there) but the document.ready function is not triggered so all the onclick action are disabled.

Refreshing the page resolve the problem but it's there a way to resolve this somehow ?

I need something like document.on("widget-attached-to-sidebar", function(){});

EDIT:

Steps to reproduce this problem :

• refresh the page
• my jQuery script works
• delete the widget
• add it again
• my jQuery script is not working anymore (need to refresh the page again)

The script.js is still there in the page (view source) through all those steps .

Answer 1

You can hook into the DOMNodeInserted event to find out when your widget has been added to the side bar.

jQuery(document).on('DOMNodeInserted', '.widget-top', function () {
      alert(jQuery('.widget-title', this).text());
});

The code above will alert to any newly added widget. Once you're hooked into the newly created widget, you can traverse it to find your specific class and take action, if it is your widget that was added.

Tested only with Firefox.

You can find out more information with this jQuery question https://stackoverflow.com/questions/15268661/jquery-on-create-event-for-dynamically-created-elements

Answer 2

Try using the "widget-added" trigger.

More info: https://core.trac.wordpress.org/ticket/19675#comment:12

Answer 3

I'd think the best way to conditionally load a script based on whether the widget is active on the page using checking is_active_widget() somewhere else outside the widget class and hooking it to wp_enqueue_scripts. Something like this:

function my_widget_load_js() {
    if ( is_active_widget( false, false, (insert widget id-base here), true ) ) {
        wp_register_script('script', get_template_directory_uri() . '/script.js', array('jquery'), null, true);
        wp_enqueue_script('script');
    }
}
add_action ( 'wp_enqueue_scripts', 'my_widget_load_js' );

Answer 4

I can't take credit for this, but have to share it for those still looking for an answer.. The chosen answer worked for me on page load and on widget-save, but wasn't doing anything on widget-add, which I require for what I'm working on.

After a bit more searching I came upon this answer by the user, George, which I customized a bit further to zero-in on the particular widget(s) I'm targeting:

var $_count = 0;
jQuery( document ).ajaxStop( function(){
    var 
    $_saveBtns = jQuery('.widget-control-save'),
    $_yourSave = '';
    $_saveBtns.each( function(){
        if( jQuery(this).is('[id*="your-widget-id-string"]') ){
            $_yourSave = jQuery(this);
        }
    });

    if ( $_count <= $_yourSave.length ){
        /* Your script/function here */
        $_count++;
    }
    else {
        $_count = 0;
        return;
    }

});