Question

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.

Answer 1

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.