Refreshing Select Menu Fails
Hi All,
I am doing some experiments with dynamically generated Select Menus in a mobile environment (Phonegap 2.3/iOS 5.0 Simulator/jQuery 1.8.3/JQuery Mobile 1.2.0).
This test app generates 2 dropdown menus and populates them using local databases. The first menu updates the second menu onChange (select tag attribute) event.
Both menus have the jQuery Mobile enhanced style at the page load. However, the second menu loses its enhanced style after being updated by the first menu and turn into native Select style. The menu contents work correctly.
The menus are generated using the following function:
function testReady(tx, result) {
var len = result.rows.length;
var myMenu = document.getElementById("myMenu");
var string = "<select id='test'><option value='' data-placeholer='true'>Select This</option> ";
for(var i=0; i<len;i++){
var test = result.rows.items(i).Names;
string = "<option value='' + test + "'>" + test + "</option>";
}
string += "/select>";
myMenu.innerHTML = string;
}
This function writes the Select menu into:
<div id="myMenu"></div>
located in a Single-page template iQuery Mobile.
I know that the second menu needs to be refreshed or recreated after being updated.
I tried the following codes inside the updating function and later in a separate function (see below) with no benefit:
function refreshit(){
alert('strat');
var myselect = $("#myMenu");
myselect[0].selectedIndex=1; // this always work and change the value
// myselect.trigger('create'); this does not change the native to enhanced style but does not prevent the END alert
// myselect.selectmenu('refresh'); this does not change the native to enhanced style and the END alert never runs
// $('#myMenu').selectmenu('refresh', true); this does not change the native to enhanced style and the END alert never runs
// $('select').selectmenu('refresh'); this does not change the native to enhanced style and the END alert never runs
// $('select').selectmenu('refresh', true); this does not change the native to enhanced style and the END alert never runs
alert('end');
}
I thought I might run the refresh at the wrong point in page loading process. I put a link on page to run the refreshit() function onClick. And it still does nothing.
I believe I misunderstood and missed something about the jQuery Mobile functions.
I would appreciate your feedback and help on this issue.
Thank you