Question

I’m loading a list view full of items via getJSON.

But when I tap a list view item I want to arrive to the Details page for that item.

Now, in ASP.NET for example you would do Details.aspx?Id=1 but how will I do in jQuery Mobile? When I get the objects via my getJSON method. Do I need to store them in an array or something?

I should add that in my current getJSON response, none of the objects has an ID tied to it. But this is just a sandbox, I’m just playing around with jQuery Mobile and getting my feed from Flickr:

$(function() { 

     $.mobile.showPageLoadingMsg("Laddar...");

     $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
       {
         tags: "cat",
         tagmode: "any",
         format: "json"
       },

       function(data) {

         $.each(data.items, function(i,item){

             $('#list')
             .append('<li><a><img src="images/de.png" class="ui-li-icon">' + item.author + '</a></li>')
             .listview('refresh');

             });

         $.mobile.hidePageLoadingMsg();

       });

});

What is the praxis in setting up “Details pages” in jQuery Mobile? Should I create the in my code above with id=x and then in some way get a object at that index in my array (which I haven’t created yet)?

Answer 1

First off there are some things you can do to greatly improve the performance of your code:

$(function() { 

     var photos = {};

     $.mobile.showPageLoadingMsg("Laddar...");

     $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
       {
         tags: "cat",
         tagmode: "any",
         format: "json"
       },

       function(data) {

         //store photo data for later
         photos = data;

         //setup an array (or string) to buffer the output
         var output = [];

         for (var i = 0, len = data.items.length; i < len; i++) {

             //add this index to the output array
             output.push('<li><a data-index="' + i + '" href="#"><img src="images/de.png" class="ui-li-icon">' + data.items[i].author + '</a></li>');

         }

         //here I am selecting the list element only once and only refreshing it once
         $('#list').append(output.join('')).listview('refresh');

         $.mobile.hidePageLoadingMsg();

       });

});

Now you can add a click event handler to the links in the #list list-view and create the necessary pseudo-pages for jQuery Mobile:

$('#list').delegate('a', 'click', function (event) {

    //get the index of this page/link and cache some objects
    var $this   = $(this),
        index   = $this.attr('data-index'),
        $toPage = $('#details_' + index);

    //stop the browser from scrolling to the top of the page due to the hash mark (#) in the link's href attribute
    event.preventDefault();

    //check to see if the page for the link clicked already exists, if so then don't re-add it to the DOM
    if ($toPage.length === 0) {

        //no page was found so create one, we can access the photos object to insert data related to the link clicked
        $('body').append('<div data-role="page" id="details_' + index + '"><div data-role="content"><p>Some Key: ' + photos.items[index].some_key + '</p><a data-role="button" href="#home">Back Home</a></div></div>');

        //set the $toPage variable to the newly added page so jQuery Mobile can navigate to it
        $toPage = $('#details_' + index);
    }

    //change to the desired page
    $.mobile.changePage($toPage);
});

Here is a demo: http://jsfiddle.net/m4Yt8/

I’m not sure what your JSON looks like so I can’t say for sure how to add data from the JSON object into the new pages, however the above template should be pretty close.