JQuery Mobile Dynamic Listview & JSON API

JQuery Mobile Dynamic Listview & JSON API

I am currently using a JSON API to retrieve data and insert it into a Dynamic Listview. However when an item is clicked i would like it to create a new page with more detailed information. Any ideas?

  1. // JS CODE
    $(document).on(
    'pagebeforeshow' , '#searchpage' , function (){

                   var smovie = "" ;

                   $(document).on( "vclick" , "#go" , function () {

                                  smovie = $( "#movie" ).val();

                                  if (smovie) {

                                  $( "#movies" ).empty();

                                  var apikey = "MYAPIKEY" ;

                                  var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0" ;

                                  

                                  // construct the uri with our apikey

                                  var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;

                                  var query = smovie;


                                  

                                  // send off the query

                                  $.ajax({

                                         url: moviesSearchUrl + '&q=' + encodeURI(query),

                                         dataType: "jsonp" ,

                                         success: searchCallback

                                         });

                                  

                                  

                                  // callback for when we get back the results

                                  function searchCallback(data) {

                                  $( ".resluts" ).html( 'Found ' + data.total + ' results for ' + query);

                                  var movies = data.movies;

                                  $.each(movies, function (index, movie) {

                                         $( "#movies" ).append( "<li><a><img src='" + movie.posters.thumbnail + "' /><h2>" + movie.title + "</h2>" + "<p>" + "Score: " + movie.ratings.critics_score + "%" + "</p></a></li>" ).listview().listview( "refresh" );

                                         });

                                  }

                                  }

                                  });

                   

                   

                   });

  2. // HTML CODE
    <div
    data-role = "main" class = "ui-content" >

                                <input type = "search" name = "movie" id = "movie" value = "" placeholder = "Movie to  Search..." />

                                <input type = "button" id = "go" value = "Search" />

                                <div class = "resluts" ></div>

                                <ul data-role = "listview" id = "movies" >    </ul>

      </div>