Changes in widget customizer not triggering 'save and publish'

Question

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...

Answer 1

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.

Answer 2

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.