Использование $ .each () в $ .getJSON - PullRequest
Новая
       31

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

4 голосов
/ 26 февраля 2012

Это для приложения jQuery Mobile, использующего версию 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 -->

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

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

Ответы [ 2 ]

1 голос
/ 26 февраля 2012

Убедитесь, что ваш вывод JSON действителен: проверьте здесь jsonlint.com

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

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

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

1 голос
/ 26 февраля 2012

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

Если вы используете «Образец приложения с использованием jQuery Mobile и PhoneGap» от Christophe Coenraets (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 Mobile по следующей ссылке под pageCreate = DOM ready : http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html.

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

...