jquery selectMenu refresh doesn't work

Question

I have a selectMenu that I initialized and later I want to populate it with some data:

$.each(data, function (Key, Value) {
    $('#ddlReportFarms').append($("<option></option>")
    .attr("value", Value.ID)
    .text(Value.Name));
});                    
$('#ddlReportFarms').selectmenu('refresh', true);

this doesn't work for some reason, the new items are not display. if I do this instead of the refresh:

$('#ddlReportFarms').selectmenu();

the items are displayed, but when this happens again, the selectMenu duplicates itself (appears twice) and becomes buggy..

anyone? thanks Igal

Answer 1

I believe you have to do it like this:

[... your other code...]
$('#ddlReportFarms').selectmenu({'refresh': true});

Answer 2

Thanks MilkyWayJoe

when I write it like you suggested, the selectMenu duplicates itself, just creates another selectmenu as many times as I run the refresh.. frustrating. this is the HTML after the refresh:

<a id="ddlReportFarms-button" class="ui-selectmenu ui-widget ui-state-default ui-corner-all ui-selectmenu-dropdown" aria-owns="ddlReportFarms-menu" aria-haspopup="true" href="#" role="button" style="width: 198px;">
<span class="ui-selectmenu-status">Select Farm</span>
<span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
</a>
<a id="ddlReportFarms-button" class="ui-selectmenu ui-widget ui-state-default ui-selectmenu-dropdown ui-corner-all" aria-owns="ddlReportFarms-menu" aria-haspopup="true" href="#" role="button" style="width: 198px;">
<span class="ui-selectmenu-status">Select Farm</span>
<span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
</a>

Answer 3

Which version of selectmenu do you use?

My fork has no method refresh but your proposal is correct (aka uing selectmenu() on a already initialized selectmenu to refresh it). Please see the wiki for more information: https://github.com/fnagel/jquery-ui/wiki/Selectmenu