Widget-updated & widget-added jQuery events/triggers in WordPress admin

Widget GUI in WordPress admin is one of the oldest ones that uses a lot of AJAX. Users learn to use it quickly and get the grasp of the widget-sidebar workflow without any problems. That’s why a lot of developers love to create widgets and as they become more and more complicated so do their interfaces. More JavaScript means a better experience for users but also more problems for the AJAX driven interface. These jQuery events will help you immensely if you ever had problem initializing or reinitializing your JS code on widget creation or update.

Do I need this? What’s the problem with widget updates?

Honestly, probably not. Most things can be solved by properly utilizing jQuery’s live() method, or on() to be more precise. The (potential) problem lies in the fact that each time you save a WP widget the complete interface (of that widget) gets regenerated by PHP by using the widget’s form function and, via AJAX, sent to the browser to replace the existing HTML. That means that the JS that does dynamic stuff with that HTML has to be reinitialized as well.

Why? Because technically it’s new HTML and new elements, so you need to re-hook all actions and events on them. For simple things such as click events that’s not necessary because jQuery can handle it, but some more complex UI elements, and especially poorly written ones need help to re-init themselves when widgets get updated and created (which is almost the same thing when dealing with this potential problem).

Relatively new events

This 2-year-old WP track ticket shows you how widget-updated & widget-added events were born and added to both the customizer and the widgets UI. Before they existed, you had to hack the AJAX call to know when it ended.

Implementing events is borderline trivial. Just use the jQuery on() function and that’s it. Please note that you absolutely must check which widget got updated or added and only run the code if one of your widgets was affected. Otherwise, your code will be run on any widget added / updated event.

$(document).on('widget-updated', function(event, widget){
    var widget_id = $(widget).attr('id');
    // any code that needs to be run when a widget gets updated goes here
    // widget_id holds the ID of the actual widget that got updated
    // be sure to only run the code if one of your widgets got updated
    // otherwise the code will be run when any widget is updated
});

$(document).on('widget-added', function(event, widget){
    var widget_id = $(widget).attr('id');
    // any code that needs to be run when a new widget gets added goes here
    // widget_id holds the ID of the actual widget that got added
    // be sure to only run the code if one of your widgets got added
    // otherwise the code will be run when any widget is added
});

 

Simple right? It is, but if you didn’t know these events existed you’d be pulling your hair out. Remember, these work in both the admin GUI and in the customizer. Let us know if you need any help down in the comments.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *