0

I had code which I hardcoded...everything worked fine...then I swapped it out for dynamic updating:

<script>
  var items = [];

  $.getJSON('initialize.json', function(data) {
    $.each(data["home"], function(key, val) {

      var tmp1 = '';
      var tmp2 = '';

      $.each(val["group"], function(key2, val2) {
        tmp1 += key2 + "/";
        tmp2 += val2 + "/";
      });

      items.push('<li><a href="#">'+key+' ('+tmp1.slice(0, -1)+')<br /><small>Completed '+tmp2.slice(0, -1)+' days ago</small><span class="ui-li-count">'+val["total"]+'</span></a></li>');
    });

    $("#temp").append(items.join(""));
  });      
</script>

Here is the container:

    <ul id="temp" data-role="listview" data-theme="c">
      <!-- Populated dynamically -->
    </ul>

I have googled and tried the proposed solutions and none work:

jQuery Mobile rendering problems with content being added after the page is initialized

http://jquerymobile.com/test/docs/pages/page-dynamic.html

I've tried the above...I am curious to know why the above doesn't work...and what will and why???

Community
  • 1
  • 1
Alex.Barylski
  • 2,843
  • 4
  • 45
  • 68

1 Answers1

0

You need to call listview('refresh') after you add new items to your listview. So try 

$("#temp").append(items.join("")).listview("refresh");

instead of

$("#temp").append(items.join(""));

Updating lists

If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added.

Here is working jsFiddle

peterm
  • 91,357
  • 15
  • 148
  • 157