Jquery Mobile, accessing detail page from list (dynamic data)

Question

I'm building an html5-app for work using Jquery Mobile which will be built like an app with phonegap later.

The app loads a list of items first from a included json-file but later from an external url (it checks if new items should be added to the list) and inserts it into the built-in sql-db in modern html5-browsers.

So far I have it working. I also have it brining out the data and presenting it in a list. However - the next step has me a bit stumped. When a user clicks on a item in the list it should open a page with the info about that item, taken from the db.

I usually work in php and there it is of course easy to do. Just add a variabel to the url with the id and then get the querystring and usi it in the php code.

Does anyone have a good idea how to do it best in JQuery Mobile? One idea I have it to simply use the locale storage and do a click event that stores an id into the local storage and then use it on the details page. It feels like there should be a better way though ...

Answer 1

As an outline I'd have in the dom a page sitting around called details

<div data-role="page" id="details">
</div>

Generate the list items with a html5 data attribute containing the unique ID in the anchor link

<li><a href="#details" data-uid="1" class="detailslink">Your list item</a></li>

Bind a click event that posts to a page that grabs the details contents, plop it into the details page and show the details page

$('.detailslink').bind('click', function(e){
    var id = $(this).data('uid');
    $.post('urltophp', {'id': id}, function(data){
        $('#details').html(data);
    }
});