[wp-trac] [WordPress Trac] #30951: Customizer: visible values (choices) not correct after setting it through javascript

[WordPress Trac]

#30951: Customizer: visible values (choices) not correct after setting it through
javascript
--------------------------+------------------------------
 Reporter:  katazina      |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Customize     |     Version:  4.1
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |     Focuses:  javascript
--------------------------+------------------------------
Changes (by westonruter):

 * keywords:   => has-patch


Old description:

> I have one template which is highly customizable and I created
> "subtemplates" from that by javascript using the wp.customize api.
>
> After I upgraded to v4.1, I found out, that now the customizer is capable
> to refresh the values if I change it from javascript and I don't have to
> reload the customizer page.
>
> '''But, it has some small issues:'''
> 1. if I set empty for color in one subtemplate and I changed from a
> subtemplate which had this color set, then the color value is empty, but
> the color box, beside the input is colored.
> `api.instance('background_color').set('');` <- I mean that for empty
>
> 2. radio buttons don't get checked correctly. I can say, they are not
> checked at all, after changed one subtemplate to another.
>
> I try to explain the second one (2):
>
> I added new setting:
> {{{
> #!php
> $wp_customize->add_setting('title_align', array(
>         'default' => 0,
>         'sanitize_callback' => 'absint'
> ));
> $wp_customize->add_control('title_align', array(
>         'label'   => 'Title alignment',
>         'settings'=> 'title_align',
>         'section' => 'content_sidebar_title',
>         'type'    => 'radio',
>         'choices' => array(
>                 0 => 'Left',
>                 1 => 'Center',
>                 2 => 'Right',
>         )
> ));
> }}}
>
> I attached an image, how it lookes like.
>
> With javascript I'm changing the settings (values):
> {{{
> #!javascript
> (function($)
> {
>     $(document).ready(function ()
>     {
>         var rTSelect = $('input[name="ready_templates"]');
>         var api = wp.customize;
>
>         rTSelect.click(function()
>         {
>             var template = $(this).val();
>             switch(template)
>             {
>                 case "orange": template_orange(); break;
>                 case "green": template_green(); break;
>                 default: template_default(); break;
>             }
>         });
>
>         var template_default = function() {
>             api.instance('title_align').set(1); //center
>         };
>
>         var template_orange = function() {
>             api.instance('title_align').set(0); //left
>         };
>
>         var template_green = function() {
>             api.instance('title_align').set(2); //right
>         };
>     }
> });
> }}}
>
> Now I select the orange template after the green template was selected
> and saved, and I see, that the "Left" labeled checkbox is not selected.
> Instead the "Right" labeled checkbox what is selected (checked).
>
> It is only visually incorrect, because if I click on the save button, the
> data is saved correctly.
> But, it will be visually correct, only if I reload the customizer page.
> The same happens with case 1 (color)

New description:

 I have one template which is highly customizable and I created
 "subtemplates" from that by javascript using the wp.customize api.

 After I upgraded to v4.1, I found out, that now the customizer is capable
 to refresh the values if I change it from javascript and I don't have to
 reload the customizer page.

 '''But, it has some small issues, including:'''

 radio buttons don't get checked correctly. I can say, they are not checked
 at all, after changed one subtemplate to another.

 I try to explain:

 I added new setting:
 {{{
 #!php
 $wp_customize->add_setting('title_align', array(
         'default' => 0,
         'sanitize_callback' => 'absint'
 ));
 $wp_customize->add_control('title_align', array(
         'label'   => 'Title alignment',
         'settings'=> 'title_align',
         'section' => 'content_sidebar_title',
         'type'    => 'radio',
         'choices' => array(
                 0 => 'Left',
                 1 => 'Center',
                 2 => 'Right',
         )
 ));
 }}}

 I attached an image, how it lookes like.

 With javascript I'm changing the settings (values):
 {{{
 #!javascript
 (function($)
 {
     $(document).ready(function ()
     {
         var rTSelect = $('input[name="ready_templates"]');
         var api = wp.customize;

         rTSelect.click(function()
         {
             var template = $(this).val();
             switch(template)
             {
                 case "orange": template_orange(); break;
                 case "green": template_green(); break;
                 default: template_default(); break;
             }
         });

         var template_default = function() {
             api.instance('title_align').set(1); //center
         };

         var template_orange = function() {
             api.instance('title_align').set(0); //left
         };

         var template_green = function() {
             api.instance('title_align').set(2); //right
         };
     }
 });
 }}}

 Now I select the orange template after the green template was selected and
 saved, and I see, that the "Left" labeled checkbox is not selected.
 Instead the "Right" labeled checkbox what is selected (checked).

 It is only visually incorrect, because if I click on the save button, the
 data is saved correctly.
 But, it will be visually correct, only if I reload the customizer page.

--

Comment:

 Please file a separate ticket for the other issue you reported, which I've
 removed from the description. It is surely a different issue, probably
 something specific with the color picker control.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/30951#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform