Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery / Jquery Mobile / Mobile

Dynamically Creating Productlists With Checkboxes In Jquery Mobile Proves Difficult

Post a Comment
I'm working on a mobile shopping list app that is supposed to support the user when creating shopping lists. I use the Jquery Mobile framework to achieve mobile functionality easil

Solution 1:

jQuery Mobile is calling controlgroup an enhanced list of checkbox inputs.

So you need to empty the container of your set of checkbox inputs, add the desired items and then refresh the whole controlgroup:

functionmakeUL(choice) {
  var cases = {
    "fruits": ['Banane', 'Gurke', 'Brokkoli', 'Chinakohl', 'Grünkohl', 'Eisbergsalat'],
    "drinks": ['Wasser', 'Cola', 'Fanta', 'Sprite', 'Pils', 'Radler']
  };
  var array = cases[choice],
    list = $("#list");
  list.controlgroup("container").empty();
  for (var i = 0; i < array.length; i++) {
    var item = $("<label for='checkbox-" + i + "'>" + array[i] + "</label><input type='checkbox' id='checkbox-" + i + "'></input>");
    list.controlgroup("container").append(item);
    $(item[1]).checkboxradio();
  }
  list.controlgroup("refresh");
}


$(document).on("pagecreate", "#page-1", function() {
  $("input[name*=radio-choice-wish]").click(function() {
    var wish = $("input[name*=radio-choice-wish]:checked").val();
    makeUL(wish);
  });
});
<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=no"><linkrel="stylesheet"href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"><scriptsrc="https://code.jquery.com/jquery-1.11.2.min.js"></script><scriptsrc="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head><body><divdata-role="page"id="page-1"><divdata-role="header"data-position="fixed"><h1>Shopping List</h1></div><divrole="main"class="ui-content"><divclass="ui-field-contain"><fieldsetdata-role="controlgroup"data-type="horizontal"data-mini="true"><legend>I wish...</legend><inputname="radio-choice-wish"id="radio-choice-wish-fruits"value="fruits"checked="checked"type="radio"><labelfor="radio-choice-wish-fruits">Fruits</label><inputname="radio-choice-wish"id="radio-choice-wish-drinks"value="drinks"type="radio"><labelfor="radio-choice-wish-drinks">Drinks</label></fieldset></div><formaction="demoform.asp"id="list-form"method="post"name="list-form"><fieldsetdata-filter="true"data-input="#myFilter"id="list"data-role="controlgroup"></fieldset></form></div></div></body></html>

Please, take a look also here: Dynamic controlgroup

Post a Comment for "Dynamically Creating Productlists With Checkboxes In Jquery Mobile Proves Difficult"