CODEWITHSUNDEEP
jqueryjsonjquery-mobileeachgetjson
Mark Rummel
Mark Rummel

Reputation: 2940

Using $.each() within $.getJSON

This is for a jQuery Mobile app using version 1.0.1.

I'm trying to get data from my getmovies.php file, which outputs JSON, to use in a jQuery function which appends the data to an unordered list on my HTML page.

My HTML page displays correctly, but the getMoviesList() function does not append any list items, so the content area is left blank.

My guess is that there is something wrong with my $.each() function. I'm more comfortable with PHP, but trying to get more familiar with jQuery and JSON for moving data around within jQuery Mobile apps.

getmovies.php outputs JSON as follows:

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

My Javascript is as follows: 

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');
  });
}

My HTML looks like this:

<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'm trying to modify the following example app to meet my needs: http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/.

Thanks for any help you can offer.

Upvotes: 4

Views: 6308

Answers (2)

aki
aki

Reputation: 709

Verify if your JSON output is valid: verify here jsonlint.com

Change your bind event to this and see if it's working.

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

to this

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

As i can see, the rest of JS code is ok! Try this and see if it's working. As i know, it should! This is the method i use on my mobile app and works very well.

Upvotes: 1

Mark Rummel
Mark Rummel

Reputation: 2940

With Adam's help I was able to narrow down the issue.

If you are using the "Sample Application using jQuery Mobile and PhoneGap" by Christophe Coenraets (http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/) and are using jQuery Mobile higher than 1.0rc1, you will probably need to replace the following code in your javascript from:

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

to:

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

The reason for this is explained in the jQuery Mobile docs at the following link under pageCreate = DOM ready:http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html.

I hope this helps anyone that runs into the same issue trying to use this great sample app.

Upvotes: 1

Related Questions