'refresh' jquery UI selectmenu after update

Question

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?

this does help me $(document).on('change', "body", function(){ $( ".ui-selectmenu" ).selectmenu(); }); — Wasim A., Apr 25 '16 at 06:03
Please note: there a three version of selectmenu with different functionality, API and documentation! Which version do you use? Code example? See the wiki for more information: https://github.com/fnagel/jquery-ui/wiki/Selectmenu — fnagel, Sep 04 '12 at 10:53

Frédéric Hamidi · Answer 1 · 2012-04-23T14:57:48.680

25

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" });

edited Apr 23 '12 at 14:57

answered Apr 23 '12 at 11:57

Frédéric Hamidi

258,201
41
486
479

$("select").selectmenu("refresh"); Doesn't seem to have any effect, gets called but no effect on the jQuery UI element. – CLiown Apr 23 '12 at 14:37
4

@CLiown, that's unfortunate. I checked both repositories listed in the wiki, and the `refresh` method does not seem to be implemented yet. It will probably be by the time this widget becomes available in the main tree. On the other hand, recreating the widget through a call to `selectmenu()` may not work in the future, in that case you might want to destroy the widget beforehand, e.g. with `$("select").selectmenu("destroy").selectmenu({style: "dropdown"});`. – Frédéric Hamidi Apr 23 '12 at 14:55
$("select").selectmenu("destroy").selectmenu({ style: "dropdown" }); did the trick for me. Thank you! – E-A Jul 06 '13 at 17:08
3

The selectmenu('refresh') works now and is the correct answer. – earl3s May 06 '15 at 18:34
Error: cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh' – Wasim A. Apr 25 '16 at 20:42
Here is a link that answers the question a little better with fewer words... http://stackoverflow.com/questions/12273176/jqueryui-selectmenu-how-to-add-more-options – Kickass Jan 22 '17 at 20:17
@Juan, which is the better answer? The one that says "this will work" without any explanation, or the one that says "depends on the version" with two github links? – Frédéric Hamidi Jan 23 '17 at 09:29

score 2 · Answer 2 · answered Jul 22 '19 at 12:47

2

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

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

answered Jul 22 '19 at 12:47

ababak

1,685
1
11
23

1

Not odd, hopefully you can see from previous comments that in 2012 "refresh" didn't work but did start working in 2015. – CLiown Jul 22 '19 at 13:33
2

Thanks for pointing out, I was searching for an answer in 2019 and didn't see it until seeing your comment and pressing "see more replies". Hope this will help someone like me in the future. – ababak Jul 23 '19 at 22:01

score 0 · Answer 3 · answered Apr 23 '12 at 10:56

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' });
});

'refresh' jquery UI selectmenu after update

3 Answers3

Linked