Setting dirty on customizer

Question

When you are using the wordpress customizer, if you don't make any changes to the settings, the wordpress customizer doesn't enable the publish button. And it shows like this:

And I want it to be displayed like this after I make a change from my custom customizer control which is an input not linked to the customizer:

How can I enable the disabled publish button from my custom control when I change something with it?

Thanks.

Answer 1

Just set the saved state to false:

wp.customize.bind( 'ready', function() {
    wp.customize.state( 'saved' ).set( false );
} );

Answer 2

Actually, triggering the change event of an linked input did the trick.

Answer 3

Without the a peek in your custom control, the exact solution can't be provided. But here you can try something like this in the customize-controls.js which should be enqueued like this:

function theme_name_panels_js() {
   wp_enqueue_script( 'theme_name-customize-controls', get_theme_file_uri( '/assets/js/customize-controls.js' ), array(), '1.0', true );
}
add_action( 'customize_controls_enqueue_scripts', 'theme_name_panels_js' );

In your customize-controls.js you can try this where 'radio-image' is the type of custom control and event is triggered on change of the radio button

( function( $, api ) {

api.controlConstructor['radio-image'] = api.Control.extend( {
    ready: function() {
        var control = this;

        $( 'input:radio', control.container ).change(
            function() {
                control.setting.set( $( this ).val() );
            }
        );
    }
} );
} )( jQuery, wp.customize );