How to refresh a DIV in jquery (mobile)?

Question

UPDATE: Sorry, I accidentally copied the data-dom-cache="true" line into my content-div. Seems very logical that the app is loading from the dom instead the new content! I've changed it to false and now it works perfectly.

Thanks.

I have a list which is dynamically generated. If someone is clicking on an entry in the list, the user is redirected to a new page where the data is loaded (dynamically). The data which is loaded depends on the list entry which the user has clicked.

When the app is loaded the first time, all things work well. But when the user is clicking on another list entry, the same data are represented as on the first run.

I've played around with the .empty() function from jQuery (to clear the div and append the new data) but it doesn't work.

EDIT:

My headlines.html file looks like this:

<div id="content>
  <div id="headlineslist">
    <ul data-role="listview" data-theme="c" id="headlineslist">
    </ul>
  </div>
</div>
<script>
  $(document).ready(function() {
    HeadlinesLoad();
  });
</script>

Here's the Javascript file:

function HeadlinesLoad() {
  $.ajax({
    type: "POST",
    url: "headlines_getter.php",
    dataType: 'json',
    cache: false,
    success: function(data1) {
      $.each(data1, function(i, currentObj) {
        $('ul#headlineslist').append('<li data-role="list-divider" 
class=​"ui-li ui-li-divider ui-bar-b">​' + currentObj.main + '</li>​').listview('refresh');
        $.each(currentObj.sub, function (j, currentSub) {
          $('ul#headlineslist').append('<li>
<a href="headlinesclicked_temp.html" onclick="headlineID(' + currentSub.sid + ')">' + currentSub.name + '</a></li>').listview('refresh');
        });
      });
    }
  });
}

function headlineID(hID) {
  window.localStorage.setItem("headlineID", hID);
}

function onHeadlinesLoad() {
  var hID = window.localStorage.getItem("headlineID");
  window.localStorage.removeItem("headlineID");
  window.localStorage.clear();
  $.ajax({
    url: "headlinesclicked_getter.php?hID=" + hID,
    success: function(html) {
      if(html){
        $("#headlineshome").empty();
        $("#headlineshome").html(html);
      }
    }
  });
}

And here is the snippet which lays in the HTML file where the data should be displayed (and refreshed on every new click the user does):

<div data-role="content" id="headlineshome"></div>
<script>
  $(document).ready(function() {
    onHeadlinesLoad();
  });
</script>

I don't know why it doesn't work, so I ask you for help.

Thanks in advance.

Best regards, John.

Answer 1

Once you update your list using jQuery mobile, consider trigger "create" event, however that's out dated, so use

.page() 

on your list like this:

$('ul#headlineslist').page();