0

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 easily.

This is my first ever web project with html and javascript.

I created a simple product list with checkboxes, Jquery mobile styles it automatically and it looks great immediately:

<form action="demoform.asp" id="list" method="post" name="list">
        <fieldset data-filter="true" data-input="#myFilter" data-role="controlgroup">
            <label for="0">Banane</label>
            <input id="0" name="products" type="checkbox">
            <label for="1">Gurke</label>
            <input id="1" name="products" type="checkbox">
            <label for="2">Brokkoli</label>
            <input id="2" name="products" type="checkbox">
            <label for="3">Chinakohl</label>
            <input id="3" name="products" type="checkbox">
            <label for="4">Grünkohl</label>
            <input id="4" name="products" type="checkbox">
            <label for="5">Eisbergsalat</label>
            <input id="5" name="products" type="checkbox">
        </fieldset>
    </form>

I then wrote a javascript function that takes an array and writes the contents of the array in this format:

var options = [
        fruits = ['Banane','Gurke','Brokkoli','Chinakohl','Grünkohl','Eisbergsalat'],
        drinks = ['Wasser','Cola','Fanta','Sprite','Pils','Radler']
    ];

function makeUL(array) {
    // Create the list element:
    var list = document.createElement('fieldset');
    list.setAttribute("data-role", "controlgroup");
    list.setAttribute("data-filter","true");
    list.setAttribute("data-input","#myFilter");

    for(var i = 0; i < array.length; i++) {
        // Create the list item:
        var label = document.createElement('label');
        label.setAttribute("for",i);

        // Set its contents:
        label.appendChild(document.createTextNode(array[i]));

        // Add it to the list:
        list.appendChild(label);

        var input = document.createElement('input');
        input.setAttribute("type","checkbox");
        input.setAttribute("name","products");
        input.setAttribute("id",i);


        // Add it to the list:
        list.appendChild(input);
    }

    // Finally, return the constructed list:
    return list;
}

// Add the contents of options[0] to #productlist:
document.getElementById('productlist').appendChild(makeUL(options[0]));

I have encountered several problems related to my inexperience but this is the biggest one:

  • JQuery Mobile takes the html I write and changes it significantly when the page is loaded. When I try to change the html after Jquery Mobile did its magic it looks unstyled. I have to somehow tell Jquery Mobile to run its script for this particular element again. How do I achieve this, is there a better way in general when working with Jquery Mobile?
deblocker
  • 7,629
  • 2
  • 24
  • 59
Sheepkillaa
  • 11
  • 2
  • Yes it happens when using dynamic html.This question has some very good answers over [here](http://stackoverflow.com/questions/6297470/forcing-jquery-mobile-to-re-evaluate-styles-theme-on-dynamically-inserted-content) – Vinay Dec 26 '16 at 02:58

1 Answers1

0

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 = $("<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>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page" id="page-1">
    <div data-role="header" data-position="fixed">
      <h1>Shopping List</h1>
    </div>
    <div role="main" class="ui-content">
      <div class="ui-field-contain">
      <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
        <legend>I wish...</legend>
        <input name="radio-choice-wish" id="radio-choice-wish-fruits" value="fruits" checked="checked" type="radio">
        <label for="radio-choice-wish-fruits">Fruits</label>
        <input name="radio-choice-wish" id="radio-choice-wish-drinks" value="drinks" type="radio">
        <label for="radio-choice-wish-drinks">Drinks</label>
      </fieldset>
      </div>
      <form action="demoform.asp" id="list-form" method="post" name="list-form">
        <fieldset data-filter="true" data-input="#myFilter" id="list" data-role="controlgroup">
        </fieldset>
      </form>
    </div>
  </div>
</body>
</html>

Please, take a look also here: Dynamic controlgroup

deblocker
  • 7,629
  • 2
  • 24
  • 59