CODEWITHSUNDEEP
javascripthtmljquery-mobile
Vikas
Vikas

Reputation: 24322

JQuery Mobile: How to re-render select box?

First time, When I load page, my select box is empty:

<select name="secondaryTitle" id="secondaryTitle"></select>

Then I make ajax call and get the json data for above select box.

arrtitle = objSecTitle.getAllSecondaryTitle(serviceId); // its an ajax call, that returns json object
var obj = jQuery("#secondaryTitle");
removeAllOptions(obj);
for(i=0;i<arrtitle.length;i++)
{
    obj.options.length=obj.options.length + 1;
    obj.options[obj.options.length - 1].text = arrtitle[i][1];
    obj.options[obj.options.length - 1].value = arrtitle[i][0];
}
function removeAllOptions(selectbox){
    var i;
    for(i=selectbox.options.length-1;i>=0;i--)
    {
        selectbox.remove(i);
    }
}

My ajax call is perfect. Above code also changes the drop-down items. But UI will not be updated when we use jQuery Mobile, as it show/hide different div for selection popup.

Upvotes: 6

Views: 20275

Answers (2)

Valdez V.
Valdez V.

Reputation: 262

Don't ask me why, but this only worked for me until I used double quotes ->"<- for all strings involved in this instruction:

$("#secondaryTitle").selectmenu("refresh", true);//working

I had it like this:

$('#secondaryTitle').selectmenu('refresh', true);//not working

and it not worked :S :S :S

Upvotes: 0

Vikas
Vikas

Reputation: 24322

Never mind!

I should check documentation properly:

//refresh value         
$('#select').selectmenu('refresh');

//refresh and force rebuild
$('#secondaryTitle').selectmenu('refresh', true);

Upvotes: 14

Related Questions