2

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 .

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

  • Nop . It isn't work . The event is not triggered. Check the edited question for more info . – TGeorge Aug 30 '14 at 19:02
  • Have a look at my edit. I'm able to get the title of any newly added widget to the admin widget area and fire an alert with it. – Michael Khalili Aug 31 '14 at 15:33
  • It's fired. You're right. Thanks ! It works in Chrome too. – TGeorge Aug 31 '14 at 16:59
0

Try using the "widget-added" trigger.

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

  • Can you post an example ? – TGeorge Aug 31 '14 at 12:51
0

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' );
  • As I see the is_active_widget() is referring to front end what I need is for the back end. – TGeorge Aug 31 '14 at 12:57
0

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;
    }

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.