JQuery Mobile, access to the detailed page from the list (dynamic data)

Question

I am creating an html5 application for working with JQuery Mobile, which will be created as a telephony application later.

The application loads the list of elements first from the included json file, but later from the external url (it checks whether new elements should be added to the list) and inserts it into the built-in sql-db in modern html5-browsers.

While it works for me. I also have the opportunity to extract the data and present it in a list. However - the next step puzzled me a little. When the user clicks on an item in the list, he should open a page with information about this item taken from db.

I usually work in php and there, of course, is easy to do. Just add the variable to the url with the id, and then get the request and add it to the PHP code.

Does anyone have a good idea how to do this best in jQuery Mobile? One idea is to simply use the locale store and make a click event that stores the identifier in the local store, and then use it on the details page. There seems to be a better way though ...

Answer 1

As a contour in my house there will be a page sitting under the name details

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

Create list items with html5 data attribute containing unique identifier in binding

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

, , ,

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