I have an issue when I'm trying to use a select in a JQM listview.
I have a listview to list a couple of computers and in every listitem the user are able to make some changes to the computers via dropdownlists.
I'm using knockoutjs to bind viewModels to the view.
Here is my listview:
<div data-role="page" id="page1"> <div data-role="content"> <ul id="editComputerList" data-role="listview" data-inset="true"> <li data-role="list-divider"> <div class="row"> <div class="column"> PC </div> <div class="column"> Lokasjon </div> <div class="column"> OS </div> <div class="column-last"> Språk </div> </div> </li> <!-- ko foreach: Computers --> <li> <div class="row"> <div class="column" data-bind="text: Name"> </div> <div class="column"> <select data-bind="value: Location, options: $root.Locations, optionsText: 'Name', optionsValue: 'Value'"> </select> </div> <div class="column"> <select data-bind="value: OsParameter, options: $root.OsParameters, optionsText: 'Name', optionsValue: 'Value'"> </select> </div> <div class="column-last"> <select data-bind="value: Language, options: $root.Languages, optionsText: 'Name', optionsValue: 'Value'"> </select> </div> </div> </li> <!-- /ko --> </ul> </div> </div>
And here am I binding the model to the view:
var viewModel = new pageViewModel(); ko.applyBindings(viewModel, document.getElementById("page1")); $("#editComputerList", "#page1").listview("refresh"); $('#editComputerList select').selectmenu(); $('#editComputerList select').selectmenu('refresh', true);
Code can be seen here: http://jsfiddle.net/dankli/7hJ5d/
Does anyone have an idea of what I'm doing wrong or is it a bug in JQM?