How to update DIV in jQuery (mobile)?

UPDATE: Sorry, I accidentally copied a line data-dom-cache="true"into my content div. It seems very logical that the application is loading from dom instead of new content! I changed it to false, and now it works great.

Thank.

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

When the application loads for the first time, everything works well. But when the user clicks on another entry in the list, the same data is presented as in the first run.

I played with a function .empty()from jQuery (to clear the div and add new data), but it does not work.

EDIT:

My headlines.html file is as follows:

<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 is 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 fragment that lies in the HTML file where the data should be displayed (and updated with every new click of the user):

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

I do not know why this does not work, so I ask you for help.

Thanks in advance.

Best regards, John.

+7
source share
1 answer

Once you update your list using jQuery mobile, consider the trigger trigger event to create , however this is deprecated, so use

.page() 

on your list:

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

All Articles