I am writing a JQuery mobile application. In this application, I need to dynamically build a list of sliders. Whenever I build my list though, only the traditional HTML-style dropdown list is rendered. I want the the JQuery mobile slider to be rendered. In an attempt to build this list dynamically, I’ve written the following:
$ .each(result.Results, function (i, r) {
var s = "<li><div data-role='fieldcontain'><label for='person" + i + "'>" + r.FullName + "</label>";
s += "<select name='person" + i + "' id='person" + i + "' data-role='slider'>";
s += "<option value='false' selected='selected'>No</option><option value='true'>Yes</option>";
s += "</select></div></li>";
$ ("#personList").append(s);
});
$ ("#personList").listview("refresh");
var sliders = $ ("#personList [data-role=slider]");
for (var i = 0; i < sliders.length; i++) {
sliders[i].slider();
}
When the code is executed, I get a JavaScript error that says:
Uncaught TypeError: Object # has no method ‘slider’
If I don’t use the “sliders[i].slider();” code, the traditional HTML drop down list is still rendered instead of the JQuery Mobile slider. Can somebody please help identify what I’m doing wrong?
Thank you!
