Использование $ .each() в пределах $ .getJSON

Question

Это для мобильного приложения jQuery, использующего версию 1.0.1.

Я пытаюсь получить данные из моего файла getmovies.php, который выводит JSON, для использования в функции jQuery, которая добавляет данные в неупорядоченный список на моей HTML-странице.

Моя страница HTML отображается правильно, но функция getMoviesList() не добавляет элементы списка, поэтому область содержимого остается пустой.

Я предполагаю, что с моей функцией $ .each() есть что-то не так. Мне больше нравится PHP, но я стараюсь лучше познакомиться с jQuery и JSON для перемещения данных в приложениях jQuery Mobile.

getmovies.php выходы JSON следующим образом:

{"items":[ 
{"movieID":"65086","title":"The Woman in Black","poster":"\/kArMj2qsOnpxBCpSa3RQ0XemUiX.jpg"}, 
{"movieID":"76726","title":"Chronicle","poster":"\/853mMoSc5d6CH8uAV9Yq0iHfjor.jpg"} 
]} 

Мой Javascript выглядит следующим образом:

var serviceURL = "http://mydomain.com/app3/services/"; 

var movies; 

$('#moviesPage').bind('pageinit', 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><a href="movie-details.html?movieID=' + movie.movieID + '">' + 
     '<img src="posters/' + movie.poster + '"/>' + 
     '<h4>' + movie.title + '</h4>' + 
     '<p>Other details...</p>' + 
     '</a></li>'); 
    }); 
    $('#movieList').listview('refresh'); 
    }); 
} 

Мой HTML выглядит следующим образом:

<div id="moviesPage" data-role="page"> 

    <div data-role="content"> 

    <ul id="moviesList" data-role="listview" data-filter="true"></ul> 

    </div><!-- /content --> 

</div><!-- /page --> 

Я пытаюсь изменить следующее примерное приложение для удовлетворения моих потребностей: http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/.

Спасибо за любую помощь, которую вы можете предложить.

Answer 1

Проверьте, если ваш выход JSON справедливо: проверить здесь jsonlint.com

Изменить событие связано с этим и посмотреть, если он работает.

$('#moviesPage').bind('pageinit', function(event) { 
    getMoviesList(); 
}); 

этому

$('#moviesPage').live('pageshow', function(event) { //or 'pagecreate' 
    getMoviesList(); 
}); 

Как я могу видеть, остальная часть JS кода в порядке! Попробуйте это и посмотрите, работает ли он. Как я знаю, это должно быть! Это метод, который я использую в своем мобильном приложении и работает очень хорошо.

Answer 2

С помощью Адама я смог сузить проблему.

Если вы используете «Образец приложения с использованием jQuery Mobile и PhoneGap» Кристофа Коэнрейца (http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/) и с помощью JQuery Mobile выше, чем 1.0rc1, вам, возможно, потребуется заменить следующий код в JavaScript из:

$('#employeeListPage').bind('pageinit', function(event) { getEmployeeList(); }); 

к:

$(document).delegate("#employeeListPage", "pageinit", function() { getEmployeeList(); }); 

причина этого объясняется в JQuery Мобильные документы по следующей ссылке: страница C reate = DOM ready: http: //jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html.

Я надеюсь, что это поможет любому, кто сталкивается с тем же вопросом, пытаясь использовать это замечательное приложение-образец.