javascript - Error calling refresh() on a jQuery Mobile select -

javascript - Error calling refresh() on a jQuery Mobile select -

i'm having problem updating jquery mobile select. on demand want alter contents , update selected value.

here's fiddle (code below): http://jsfiddle.net/cjindustries/0cmg8vvt/2/

i'm getting error in console (along select not updating): uncaught error: cannot phone call methods on selectmenu prior initialization; attempted phone call method 'refresh'

i've seen similar things here on none of answers i've found prepare issue. we're using jquerymobile 1.3.1 , jquery 1.9.1.

any help appreciated :)

thanks, chris.

code...

<div data-role="page" id="p1"> <div data-role="content"> <h1>page 1</h1> <select class="pageselect"></select> <a href="#" id="update-select-1" data-role="button">update select menu</a> </div> </div> function generateoptions() { var numbers = [], html = ""; (var i=0; i<100; i++) { var v = math.random(); numbers.push(v); html = html + '<option value="' + v + '">' + v + '</option>'; }; homecoming { html: html, value: numbers[5] }; }; $(document).on('click', '#update-select-1', function() { var options = generateoptions(), select = $.mobile.activepage.find('.pageselect'); select.html(options.html); select.val(options.value); // updates select lose styling // select.selectmenu().selectmenu('refresh', true); // fails select.selectmenu('refresh', true); });

don't utilize .pageselect selector, because jqm create additional element style. when ´select = $.mobile.activepage.find('.pageselect'); select.html(options.html); select.val(options.value);´

you inserting html code in 2 elements, select , rendered object, , because of that, lose styling.

try this: $.mobile.activepage.find('select[class=pageselect]').html(options.html).select('refresh');

http://jsfiddle.net/cjindustries/0cmg8vvt/

also, if starting jqm, consider moving v1.4.

javascript jquery html jquery-mobile jquery-mobile-select