Question

I’m using JQuery Mobile 1.1.0 and I’m having trouble keeping the underlying list selections in sync with the rendered state of the JM control. Here is an example:

This is a sample of the control type being used.

<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
    <select name="taResidentYears" id="taResidentYears">
        <option selected="selected" value="">Years</option>
        <option value="0">0 Years</option>
        <option value="1">1 Year</option>
        <option value="2">2 Years</option>
    </select>
    <select name="taResidentMonths" id="taResidentMonths">
        <option selected="selected" value="">Months</option>
        <option value="0">0 Months</option>
        <option value="1">1 Month</option>
        <option value="2">2 Months</option>
    </select>
</fieldset>

On a normal page load the control renders properly and may then have values selected as follows…

However, on some page load scenario’s I have background JQuery routines sets the value of each select control from data stored in local storage. In these scenario’s, the JQuery Mobile rendering of this falls out of sync and I get the following even though the values are actually set. These values represent the selection-pending values.

Insofar as the underlying form is concerned, all the values are correct and nothing has been lost. Its just the visual representation that is out of sync.

What can I do to get the JM controls to re-bind to the underlying values?

Answer 1

It turns out I just needed to ensure I ordered the script tags such that the JQuery Mobile one was last in the list. In some cases, I needed to call the associated JQuery Refresh() method to rebind.