Question

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!

Answer 1

I think you need to create a new JQuery object when using in a for loop like that…

  var sliders = $("#personList [data-role=slider]");
  for (var i = 0; i < sliders.length; i++) {
    $(sliders[i]).slider();
  }

See this post for more info (more specifically the answer from SLaks)

Of course you can get by without using the loop at all anyway…

$("#personList [data-role=slider]").slider();