I have a widget plugin that I've created, that lists about 10 fieldsets. jQuery runs at the beginning and hides and fieldsets that have no values. There are also buttons that allow to "Add" and "Remove" fieldsets.

Everything works great except for when its time to "Save". After clicking Save all of the jQuery stops working, all of the hidden fieldsets are shown, and the "Add" and "Remove" buttons no longer work. The only way to continue using the widget properly is to refresh the page

Anyone idea what might be causing this, or a possible solution?

I have a widget plugin that I've created, that lists about 10 fieldsets. jQuery runs at the beginning and hides and fieldsets that have no values. There are also buttons that allow to "Add" and "Remove" fieldsets.

Everything works great except for when its time to "Save". After clicking Save all of the jQuery stops working, all of the hidden fieldsets are shown, and the "Add" and "Remove" buttons no longer work. The only way to continue using the widget properly is to refresh the page

Anyone idea what might be causing this, or a possible solution?

• widgets
• jquery

• Is "Save" triggering an error? If you're using Firefox, you can check for these errors by installing Firebug and viewing the console. This will tell you a) if there's an error and b) what's causing the error. – EAMann Commented Dec 3, 2010 at 18:51

4 Answers 4

You're looking for jQuery.live(), or jQuery's livequery plugin, depending on what you're seeking to do. (The second is the proper one if you need to use onChange events.)

As things stand, your jQuery hooks are not called when the save button is called, because the form's tags are reloaded using ajax, and jQuery(document).ready() is, obviously, not getting called as they are.

You just need to rebind the controls inside the jQuery.ajax callback function's 'success'.

Binding triggers by .live() might be an alternate option - I personally do prefer .on() function.

Just use a DOM inspector the check the DOM event bindings.

This is an Ajax thing. One solution to make your script work again when you save the widget:

jQuery(document).ajaxSuccess(function(event, xhr, settings) {
    var widget_id_base = 'your-widget-id-base';
    if(settings.data.search('action=save-widget') != -1 && settings.data.search('id_base=' + widget_id_base) != -1) {

        // Do your stuff again here

    }
});

You can call your functions on 'widget-added widget-updated'. Example -

$( document ).on( 'widget-added widget-updated', onSaveWidget );

function onSaveWidget( event, widget ) {
   initColorPicker( widget );
}

So your custom JS functions will also work after your widget is saved.