Dynamically creating productlists with checkboxes in jQuery Mobile proves difficult

Question

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 functio

Answer 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:

function makeUL(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 = $("" + array[i] + "");
    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);
  });
});

  
  
  
  
  


  

    

      
Shopping List
    
    

      

      

        
I wish...
        
        Fruits
        
        Drinks
      
      
      

        

        
      
    
  

Please, take a look also here: Dynamic controlgroup