Customizer Selective Refresh doesn’t refresh properly with saved value

by

I’ve been stuck on this for a few days, even looking up several questions, guides, and source code. Something to me is just wrong but I can’t exactly figure it out.

Objective: I need to use a selective reload to a specific element on the page when a the value has changed.

Problem: When I change a customizer setting, It gets sent through WordPress’s own ajax function. However, I see no way to hook into that function or related functions to verify that the request was first processed before updating the part of the page I want to refresh.

I’ve also noticed that every time I check the console window for network activity, there is, basically, a race condition where the ajax is fired almost alongside of the refresh.

For instance, lets say the value in the database is 2 and I change it to 4. The callback on the selective refresh return GetOption("logo_alignment", true);
 will return 2 and the expected value is 4.

PHP Control object to render its callback: 

"refresh" => array(
   "selector" => ".main-menu",
   "render_callback" => function() {
       // return main_menu(true);
       return GetOption("logo_alignment", true);
   }
)

GetOption Function:

function GetOption($option, $debug = false) {
    $customizerOptions = _object(apply_filters("customize_changeset_data", array()));
    if (isset($customizerOptions->{$option})) {
        // var_dump("Customizer $option found as ".$customizerOptions->{$option});
        return $customizerOptions->{$option};
    }
    else {
        return null;
    }
}

The javascript:

(function ($) {
    wp.customize("logo_alignment", function(value) {
        value.bind(function(newval) {
            console.log("Logo Alignment: "+newval);
        });
        value.bind("saved", function() { 
            console.log("Saved!");
        })

        this.selectiveRefresh.bind("render-partials-response", function(response) {
            // Issue it partially here. The response of the triggered event. 
            // However the data has been acquired before the ajax was able to finish updating the database.
            console.log(response);
        });
    });


})(jQuery);

I can confirm that the control is correctly added to the customizer, that the control is refreshing, and the new value DOES get saved in the database.

Any suggestions or help would be greatly appreciated. If any more information is needed, please ask.

These are the pages I’ve been referencing:

How to mix partial and full page refresh in the same section of the customizer?

How do I implement selective refresh with a customizer setting?

Customize Changesets Technical Design Decisions

Selective Refresh in the Customizer

https://github.com/WordPress/WordPress/blob/master/wp-includes/js/customize-selective-refresh.js

0

Leave a Comment