12

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.

serializer
  • 91
  • 1
  • 8
John Brunner
  • 2,842
  • 11
  • 44
  • 85
  • Sorry for asking this, but have you made sure this is not a caching issue? Maybe the mobile browser thinks he's smarter than the "cache: false"-Param? – Lukx May 21 '12 at 21:34
  • http://stackoverflow.com/questions/5562461/refresh-a-section-after-adding-html-dynamically-to-jquery-mobile – lukas.pukenis May 21 '12 at 21:35
  • With jQuery mobile you need to trigger "create" event in order for refreshing to happen. It costs performance to refresh everything on a mobile device :) – lukas.pukenis May 21 '12 at 21:35
  • And what's up with the double-declaration of onHeadlinesLoad? You might want to tidy that bit up first. Then, once that is done, you tell us where hID, which you all of a sudden use in your second onHeadlinesLoad, comes from. – Lukx May 21 '12 at 21:42
  • @Lukx: sorry for the double-declaration, was an copy failure. I've corrected that in my question. The hID is retrieved from the `onclick` function in the first function (`function HeadlinesLoad()`), which is retrieved from my php-file. – John Brunner May 21 '12 at 21:49
  • @lukx i've deleted the "cache: false" line but it changes nothing.. – John Brunner May 21 '12 at 21:57
  • @John: Where is your function, `HeadlinesLoad()` called? How is `onHeadlinesLoad` supposed to know `hID`, as this is only a local variable within `headlineID()`? Might be a copy/paste error and you mean to use cid? Please, do consider tidying up your code (remove unnecessary stuff like the debug logs, and inserting some line breaks here and there - scrolling horizontally has never been one of my favourites. – Lukx May 21 '12 at 22:04
  • @lukx i've updated now my question (formatting, adding the line where HeadlinseLoad() is called, and change the cid to hID) the way you wanted it! – John Brunner May 22 '12 at 07:41
  • @Lukx thanks for helping, i've found the "mistake"! – John Brunner May 22 '12 at 10:31
  • Just out of curiosity: What was it? – Lukx May 22 '12 at 10:31
  • He updated the question with his solution :) – lukas.pukenis May 22 '12 at 10:34

1 Answers1

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();
lukas.pukenis
  • 13,057
  • 12
  • 47
  • 81