Having problem in jQuery Mobile with dynamically loaded select menu ....
I have a jQuery Mobile application which dynamically loads html form code into an empty div inside the "content" div of a web page.
<div id="MainContent" data-role="content" data-theme="b">
<div class="formspace" id="formspace" ></div>
</div>
Having problems with the dynamic loading of the select menu form element into #formspace. All other form elements are behaving as expected. During an "Add" process, the select menu is loaded as follows:
<select id="mtype" name="mtype" size="1" data-native-menu="true">
<option value="">Select One...</option>
<option value="A">Pick A</option>
<option value="B">Pick B</option>
<option value="C">Pick C</option>
</select>
The element displays as "Select One...", as it should. During the Edit and Delete processes, a step is included in the ajax load() callback to perform a $.getScript() to retrieve current record data. The getScript() appends an additional option, that contains record data, to the element :
<select id="mtype" name="mtype" size="1" data-native-menu="true">
<option value="">Select One...</option>
<option value="A">Pick A</option>
<option value="B">Pick B</option>
<option value="C">Pick C</option>
<option selected="selected" value="B">Pick B</option>
</select>
THE PROBLEM: Using jQuery Mobile (1.1.0) the element displays "Select One..." instead of "Pick B". Using regular jQuery (1.7.1) and UI, it displays "Pick B". When you click the icon in the element, jQuery Mobile shows the drop down list with a second "Pick B" as a highlighted (selected) item AND does not change the display from "Select One..." even if I click the already highlighted item.
I also include a trigger() function in the callback. Have tried calling the trigger() on the "pageContainer" and on the div (#formspace). Executing the trigger() after the getScript() and before the form validate()/ajaxSubmit() functions. Have tried both "refresh" and "create" options. The "refresh" option DOES NOT make jQuery Mobile elements at all. They appear as regular HTML elements AND correctly displays "Pick B" for the select menu (selected) value. The "create" option displays jQuery Mobile elements BUT shows "Select One..." in the select menu element. Not sure of the real difference between "create" and "refresh" except for what I see.
Wondering if the issue is how the "refresh" and "create" handle dynamic content. Maybe a timing thing OR where/when the trigger() is executed?? I don't have this problem on pages loaded with static code.
Would appreciate any ideas. Also having issues with 'data-native-menu="false" ', but I'll save that for another post.
Thanks...