0

I use multi-page template (JQM) and created a single html file with 2 pages (Page0 and Page1). Both pages have the same selectmenu element, which is dynamically created during page load.

For some reason, selectmenu element in Page1 has some style issues (it looks that some css style has not been applied correctly and/or the element has not been correctly enhanced), whereas the one in the main page seems to be alright.

Please visit the following link to see the 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?

Detroit
  • 17
  • 1
  • 4
  • You could describe the issues and what you want to achieve a bit better. – NoDataDumpNoContribution Mar 17 '16 at 10:34
  • I think you need to care about where you insert the code into DOM. Check this out: http://jsfiddle.net/pdnpyh5h/6/. Also see the answer in this thread: http://stackoverflow.com/questions/15800121/why-i-have-to-put-all-the-script-to-index-html-in-jquery-mobile – Gjermund Dahl Mar 17 '16 at 11:27
  • Because you shouldn't use `.selectmenu()` on static elements, you don't need to recreate them http://jsfiddle.net/pdnpyh5h/7/ plus don't use `.ready()`, use `pagecreate`. – Omar Mar 17 '16 at 17:45

1 Answers1

1

On the second menu, changing

mySelect.selectmenu().selectmenu('refresh');

to

mySelect.selectmenu('refresh');

will work because the 2nd selectmenu is already initialized.

JSFiddle Example

Derek Daley
  • 160
  • 8