how to enhance dynamically created select menu in jquery mobile -
i use multi-page template (jqm) , created single html file 2 pages (page0 , page1). both pages have same selectmenu element, dynamically created during page load.
for reason, selectmenu element in page1 has style issues (it looks css style has not been applied correctly and/or element has not been correctly enhanced), whereas 1 in main page seems alright.
please visit following link see issue in action:
http://jsfiddle.net/dalsword/pdnpyh5h/5/
<div data-role="page" id="first"> <div data-role="header"> <h3> first page <a href='#second' class='ui-btn-right ui-icon-back ui-btn ui-corner-all ui-shadow'>next</a> </h3> </div> <div data-role="content"> <div class='ui-field-contain'> <label for='g1'>select menu</label> <select id='g1' data-native-menu='false'> </select> </div> </div> </div> <div data-role="page" id="second"> <div data-role="header"> <h3> first page </h3> </div> <div data-role="content"> <div class='ui-field-contain'> <label for='g2'>select menu</label> <select id='g2' data-native-menu='false'> </select> </div> </div> </div> $(document).ready(function(e) { var content = "<option value='1'>element 1 </option>"; content += "<option value='2'>element 2 </option>"; content += "<option value='3'>element 3 </option>"; content += "<option value='4'>element 4 </option>"; content += "<option value='5'>element 5 </option>"; var myselect = $('#g1'); myselect.empty().append(content); myselect.selectmenu().selectmenu('refresh'); var myselect = $('#g2'); myselect.empty().append(content); myselect.selectmenu().selectmenu('refresh'); }); i use:
- jquery mobile 1.4.5
- jquery 1.11.1
any suggestions?
on second menu, changing
myselect.selectmenu().selectmenu('refresh');
to
myselect.selectmenu('refresh');
will work because 2nd selectmenu initialized.
Comments
Post a Comment