I develop my custom widget with setting where I can set up custom color for the widget. I use this code to initialize wpColorPicker
instead of default text input in form()
method of Widget class:
jQuery(document).ready(function($){
$('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').wpColorPicker();
});
All works great but if you are trying change the color in Theme Customizer after changing value nothing happens: the Save button still not active and site page not refreshing with the new color.
Previously trying for triggering change
event, but not working:
$('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').wpColorPicker({
change: function(event, ui) {
$('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').change();
}
});
How to reload the page preview (trigger the event when value inside my input have been changed)?
wp.customize.previewer.refresh();
in your JS to refresh to preview. ;)$(this).change();
should be enough to work, but you should throttle it and you're probably running into the confusing WP widget javascript initialization issue anyway - see wordpress.stackexchange.com/a/212676/57034 for a working example using wpColorPicker...wp.customize.previewer.refresh();
refreshing works, but WordPress still ignoring my new values in wpColorPicker inputs (they've updating via JS and this point is an issue with Customizer).