0

Widget customizer has just become core in WordPress 3.9. I'm trying out the beta version hoping to get widgets working on the customize screen in the same way I have on the ordinary widgets page. Some of my widgets use javascript, like a select element transformed using a jQuery plugin - called tokenInput.

I need to be able to initialise the javascript on the new customizer screen where I can add / edit widgets.

  • I can already initialise javascript on page load
  • I can't reinitialise javascript on widget add, or on widget save.

So basically when I click on a widget to add it, or when I save it, I lose the jquery plugin and it goes back to a normal select element.

I solved this for the ordinary widgets page using something like this:

jQuery(document).ready(function() {

        // -------------------------------------------
        // On page load
        // -------------------------------------------
        input.tokenInput("/search-posts.php");

        // ---------------------------------------------
        // On new widget dropped in the sort area
        // ---------------------------------------------

        jQuery(".widgets-sortables").on("sortreceive", function(event, ui) {

            setTimeout(function() { 

                jQuery("#widgets-right .select_news_post:not(.token)").each(function(){

                    var input = jQuery(this);
                    input.addClass('token');
                    select = input.next('select');

                    input.tokenInput("/search-posts.php");
                });
            }, 500)
        });

        // ---------------------------------------------
        // On widget save
        // ---------------------------------------------

        jQuery(document).ajaxSuccess(function(e, xhr, settings) {

            var widget_id_base = 'news-post';
            if (settings.data !== "undefined") {

                if (settings.data.search('action=save-widget') != - 1 && settings.data.search('id_base=' + widget_id_base) != - 1) {

                    // jQuery Tokeniser
                    jQuery("#widgets-right .select_news_post:not(.token)").each(function(){

                        var input = jQuery(this);
                        input.addClass('token');

                        input.tokenInput("/search-posts.php");
                    })
                }
            }
        }
}

Does anyone have any idea what I would use on the widget customizer page to make it reinitialise the javascript on add new widget and save widget?

Your Answer

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

Browse other questions tagged or ask your own question.