CODEWITHSUNDEEP
jqueryjquery-mobilemobiledynamic-pages
dmgig
dmgig

Reputation: 4568

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

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.

Upvotes: 3

Views: 2510

Answers (2)

dmgig
dmgig

Reputation: 4568

Alright, well, here is how I fixed it. Though I won't chose this as the answer because it is so far from how I had wanted it to work and seems highly convoluted.

The issues:

  1. Unable to save any page changes to history that didn't point to a real .html page. So bouncing between dynamic pages was out.
  2. I needed a way to pass my data to the .html page that would stay inside the history, so I went with the a serialized string in the url, like a GET string. Similar to here, but a different, shorter one, cleaner one I can't find the link for - Sorry! (How can I get query string values in JavaScript?)
  3. The .html pages had to be different and swap between each other so that the page would reload and fire the page change event listeners.

Now the html pages are stored and have all the info needed to redraw themselves on clicking back.

code for #2 (not mine, great thanks to whoever wrote it):

$.urlParam = function(name){
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results[1] || 0;
}

code for #3:

// change page
if($('.ui-page-active').attr('id') == "record-a"){
    $.mobile.changePage("p-record-b.html?table=" + content_type + "&id=" + record_id);
}else if($('.ui-page-active').attr('id') == "record-b"){
    $.mobile.changePage("p-record-a.html?table=" + content_type + "&id=" + record_id);
}else{
    $.mobile.changePage("p-record-a.html?table=" + content_type + "&id=" + record_id);
}

Upvotes: 2

Omar
Omar

Reputation: 31732

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
 });
});

Upvotes: 2

Related Questions