Using $ .each () within $ .getJSON

Question

This is for jQuery mobile application using version 1.0.1.

I am trying to get data from my getmovies.php file, which outputs JSON, for use in a jQuery function that adds data to an unordered list on my HTML page.

My HTML page displays correctly, but the getMoviesList () function does not add list items, so the content area remains empty.

I guess something is wrong with my $ .each () function. I like PHP more, but I try to learn more about jQuery and JSON to move data in jQuery Mobile applications.

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 looks like this:

 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 is as follows:

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

Thanks for any help you can offer.

Answer 1

Verify JSON output is correct: here confirm jsonlint.com

Change the binding event to this and see if it works.

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

to that

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

As I can see, the rest of the JS code is fine! Try this and see if it works. As I know it should be! This is the method that I use in my mobile application and works very well.

Answer 2

With the help of Adam, I managed to narrow the question.

If you use Christopher Cohenreitz’s “Sample Application Using jQuery Mobile and PhoneGap” (http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/) and use jQuery Mobile above 1.0rc1, you probably need to replace the following code in your javascript:

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

in

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

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

I hope this helps anyone who is facing the same problem trying to use this wonderful sample application.