I'm starting playing with JQM with some list-details structure.

I have an home page, which opens clicking a navbar iteam a list of catalogues, and for each catalogue clicked I show a list of CDs.

I'm using a single page model, with multiple html files.

my goal is to collect some database data on a remote server with php and json and insert the data on the page before showing it, to have a fluid transition.

so I intercept the pagebeforechange event, I call preventDefault to avoid the automatic page change, load the page to have it in the DOM without showing it, and call a function that requests the json data

Once received the json data I change the page content and  call the change method to show the page

something like this:

                   e.preventDefault(); 

                   $( ":mobile-pagecontainer" ).pagecontainer( "load", data.toPage);

... something similar for the CD list, plus some code to parse the catalogue id parameter.

so, after loaded the json data, using .append I populate the listview, refresh it, and then show the catalogues page:

$( ":mobile-pagecontainer" ).pagecontainer( "change", "#catalogues", { transition: "slide" } );

obviously #catalogues is the id of the catalogue div with data-role="page"

more or less I do the same for for the CD list...

all seems to work fine, except that something seems to go wrong with the pages history, the back button in the catalogues page takes me correctly back to the home page, but the back button on the CD list page does nothing at the first click, and goes back to the home page on the second click...

what's going wrong?

Am I handling all the stuff in a too complicated way?

I have been searching for a full example of single page site with fluid json calls and page changes, but without success

thanks for your reply,

     Giulio