Widget “Save” resetting jQuery hidden fields

1 Views

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

Read More

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

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. 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.

  2. 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.

  3. 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

    }
});

  4. 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.