Question

My data from getmovies.php is working correctly and loading into #moviesPage the FIRST time I load the page. However, if I navigate away from #moviesPage and then return to it the content does not reload. The header and footer appear and I can see that the unpopulated <ul> is also there, just not any of the dynamically loaded <li>s.

My code is below. Any thoughts on how I can get my dynamic data to load when I return to a page?

$( '#moviesPage' ).live( 'pagebeforecreate',function(event){
  getMoviesList();
});

function getMoviesList() {
  $.getJSON(serviceURL + 'getmovies.php', function(data) {
    $('#moviesList li').remove();
    movies = data.items;
    $.each(movies, function(index, movie) {
      $('#moviesList').append('<li>' +
      '<img src="posters' + movie.poster + '"/>' +
      '<div class="movie-toprow"><h4>' + movie.title + '</h4>' +
      '</li>').listview('refresh');
        });
    });
}

I’m using jQuery Mobile 1.1.0-rc.1, but was having the same issue with 1.0.1. This is for a mobile app that will be used on iOS, Android, and other mobile platforms.

BONUS: For now I just want the content to reload. However, eventually I would like to cache the title and movie poster image for each unique movieID, but still pull some dynamic data in for each <li> (I removed this other data to simplify my code for this question). I’m not very familiar with caching, but would like to know how to load both new data and cached data when the page is revisited. I know I could use localStorage or sessionStorage for the title, but how do I make it easy for the image to be reloaded without making another request to the server?

Thank you for any insight you can share on my primary or bonus question! -Mark

Answer 1

to move back to a cached page use the #moviesPage method, so instead of index.html use the page Id #index or #profile

— From comments