Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 799
Vikas Avatar asked Jan 29 '11 06:01

Vikas


1 Answers

Never mind!

I should check documentation properly:

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

//refresh and force rebuild
$('#secondaryTitle').selectmenu('refresh', true);
like image 70
Vikas Avatar answered Sep 22 '22 13:09

Vikas