Dynamically Creating Productlists With Checkboxes In Jquery Mobile Proves Difficult
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"