CODEWITHSUNDEEP
jqueryjquery-ui
CLiown
CLiown

Reputation: 13853

'refresh' jquery UI selectmenu after update

I have an get request which fetches a bunch of category information to populate a <select>. I'm using jQuery UI Selectmenu to style my select.

So my jQuery looks a little like this:

//Initalise the selectmenu
$("select").selectmenu({ style: 'dropdown' });

$.get("http://localhost/somedata?cat=2", function (data) {
    $.each(data, function (index, itemData) {
        $("<option value='" + itemData.Id + "'>" + itemData.Name + "</option>").appendTo("#selectList");
    });
});

However this populates the <select> but does not update the jQuery UI selectmenu. Any ideas what I need to do to get the selectmenu to be 're-drawn' so the new values appear in the selectmenu?

Upvotes: 6

Views: 41007

Answers (3)

ababak
ababak

Reputation: 1803

That's a very old question so currently there is a much simpler solution available:

$("select").selectmenu("refresh");

Upvotes: 2

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263147

You can use the aptly-named refresh method, documented in the development wiki:

$("select").selectmenu({ style: 'dropdown' });

$.get("http://localhost/somedata?cat=2", function(data) {
    $.each(data, function(index, itemData) {
        $("<option value='" + itemData.Id + "'>" + itemData.Name
            + "</option>").appendTo("#selectList");
    });

    $("select").selectmenu("refresh");
});

Update: Unfortunately, the refresh function is documented but does not seem to be implemented yet. Another option is to destroy the widget and recreate it:

$("select").selectmenu("destroy").selectmenu({ style: "dropdown" });

Upvotes: 25

coolguy
coolguy

Reputation: 7954

Ill recommend the ajax way..try this

$(document).ready(function(){
  $.ajax({
                   url :/somedata?cat=2,          

                   success:function(data){
                        $.each(data, function (index, itemData) {
        $("<option value='" + itemData.Id + "'>" + itemData.Name + "</option>").appendTo("#selectList");
    });

                   }
                });
$("select").selectmenu({ style: 'dropdown' });
});

Upvotes: 0

Related Questions