Мои данные из getmovies.php работают правильно и загружаются в #moviesPage ПЕРВЫЙ раз, когда я загружаю страницу. Однако, если я перейду от #moviesPage и вернусь к нему, содержимое не будет перезагружено. Появляются верхний и нижний колонтитулы, и я вижу, что здесь также есть ненаселенный <ul>, но нет динамически загруженного <li>s.
Мой код указан ниже. Есть мысли о том, как заставить мои динамические данные загружаться при возвращении на страницу?
$( '#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');
});
});
}
Я использую jQuery Mobile 1.1.0-rc.1, но у меня возникла та же проблема с 1.0.1. Это мобильное приложение, которое будет использоваться на iOS, Android и других мобильных платформах.
БОНУС: А пока я просто хочу перезагрузить контент. Тем не менее, в конечном итоге я хотел бы кэшировать title и movie poster image для каждого уникального movieID, но все же извлекать некоторые динамические данные для каждого <li> (я удалил эти другие данные, чтобы упростить мой код для этого вопроса). Я не очень знаком с кэшированием, но хотел бы знать, как загружать как новые, так и кэшированные данные при повторном посещении страницы. Я знаю, что мог бы использовать localStorage или sessionStorage для title, но как мне сделать так, чтобы изображение было загружено без повторного запроса к серверу?
Спасибо за любые идеи, которыми вы можете поделиться на мой основной или бонусный вопрос! -Марк