JQuery Mobile: Using 'data-rel="back"' with dynamic page generation

Question

I have an issue with moving backwards through the history stack in my jquery mobile app.

Essentially, I have three pages:

1. search form (prebuilt div with page role. limited nav: only to results list page)
2. results list (prebuilt div with page role, results info added via ajax. Navigation possible to any record page)
3. record page (dynamically built completely. Unlimited navigation possibilities to related record pages)

The record pages are created dynamically based on a table and a record_id, appended to the document body each time a new record is selected.

var page_id = table + record_id;
var pg_html = newPageHTML(page_id );
$('body').append(pg_html);
$.mobile.changePage($("#" + page_id));

after advancing to a record and pressing the 'back' button (data-rel="back"), expected behavior would be to go back to the previous page, be it another record or the results list, but I am sent all the way back to search form. This occurs when i use data-dom-cache="true" and when I do not.

Any explanation as to why this would be? Thanks for the help.

Answer 1

Get the ID of the previous page in DOM then move to it.

Working Demo

$('.selector').on('click', function() {

 // get the ID of the previous page
 var previous = '#' + $.mobile.activePage.prev('div[data-role="page"]')[0].id;

 // move to previous page with reverse effect
 $.mobile.changePage(previous, {
  transition: 'slide',
  reverse: true
 });
});