CODEWITHSUNDEEP
jquery-mobile
Andy
Andy

Reputation: 2140

Manually triggering the styling on a jQuery mobile select list

I'm building a select list with an Ajax call that is triggered when another select list is changed.

The page loads correctly with the jQuery styling, but when I replace my ajax container with the new div I can't get jQuery mobile to format it. This means that it reverts to the native select list format.

I have tried what is suggested in the JQM documentation:

var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

but that does not work. My page initially loads with this:

<div id="ajax-destination">
     <select id="destinationAirport" data-native-menu="false">
      <option value="-- Please Select --" data-placeholder="true">-- Please Select --</option>
     </select>

and this is my jQuery code wrapped in the change function of the other select list.

$('#ajax-destination').empty();
$.post(url, { departureAirport : departureAirport }, function(data) {
    $('#ajax-destination').append(data);
var myselect = $("#destinationAirport");
myselect[0].selectedIndex = 1;
myselect.selectmenu("refresh");
});

The only other way I can think to do this is to return a JSON array via Ajax and use that to add the options to the select list, but I would prefer to just send formatted HTML because it's simpler to follow.

Upvotes: 2

Views: 2120

Answers (2)

Phill Pafford
Phill Pafford

Reputation: 85298

If myselect.selectmenu("refresh"); or myselect.selectmenu("refresh",true); doesn't work you can always refresh the page using

you could try myselect.trigger('create');

Upvotes: 2

Reddy Prasad
Reddy Prasad

Reputation: 251

@Andy :

myselect.selectmenu("refresh"); will refresh the select box and where as myselect.selectmenu('refresh', true); will rebuild the select menu.It may helps you out. Check this link once http://forum.jquery.com/topic/how-to-add-items-and-refresh-the-select-menu-in-jquery-mobile

Upvotes: 2

Related Questions