5

I'm making some of our widgets customiser friendly, so they work on the customise page and support widget previews. Usually when you update a widget the save button becomes usable and changes to 'save and publish'.

However, I'm using some javascript (token input http://loopj.com/jquery-tokeninput/) on the widget text input, so people can select from a list of options in a nice way. The problem is updates to this field don't trigger the option to save and publish, so there's no way of saving the changes.

Does anyone have any ideas?

The basic form field is:

<input name="the_token_input" id="" class="the_token_input" value="This will be the token input" /> 

Once you intialise the javascript token input on it a completely new element is created that takes on the input's role, something like this:

<ul class="token-input-list">
  <li class="token-input-token">Choice 1</li>
  <li class="token-input-token">Choice 2</li>
  <li class="token-input-token">Choice 3</li>
</ul>

Once you make a change it doesn't affect the original input field, so I'm guessing that's why the page doesn't think anything's been changed...

6

I was experiencing a similar problem with one of my custom widgets. It seems that dynamically inserted field values do not trigger the widget form to update. I wound up adding the following to the js that inserts the dynamic value:

$(input).trigger('change');

where input is the field you are updating.

Not sure if there is a better way to do this, but this is working for me.

  • Seems as not working if you are using input with wpColorPicker(). – Kolya Korobochkin Dec 27 '15 at 15:58
  • @KolyaKorobochkin That is the war path I'm on right now. Can't get wpColorPicker() to work with triggering customizer Save and Publish. – Curtis Jun 27 '17 at 6:47
  • @KolyaKorobochkin, upon change event of the colorPicker, you have to trigger the change event of the related input field like so: $(widget).find('.widget-text-color').wpColorPicker({ change: function(e, ui) { $( e.target ).val( ui.color.toString() ); $( e.target ).trigger('change'); // enable widget "Save" button } }); – MirzaP Jun 17 at 14:57
1

Make sure that you trigger a change event on the input element. Otherwise, the Customizer won't know that it has an updated value which needs to get updated in the widget's setting.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.