Question

I’m using nested pages in Jquery Mobile:

Looks like this:

// wrap page
<div data-role="page" id="wrap">
     // panel
     <div data-role="panel" data-id="popover">
         // nested pages
         <div data-role="page" id="nested1"></div>
         <div data-role="page" id="nested2"></div>
     </div>
</div>

On transitions, I’m switching $.mobile.pageContainers to load nested pages into panels vs. loading into the body (default JQM) like this:

$.mobile.changePage( page-to-be-loaded, {
          // previous page in panel
          fromPage:from,         
          // update the URL with the nested page hash    
          changeHash:hashChange,     
          // target panel
          pageContainer: $('div:jqmData(id="popover")')
          });

This all works as expected = when I load a nested page inside a panel, the URL updates to

http://some.com#nested1/2/3...

My problem is in “cleaning up” the URL, when I’m leaving the wrap page and going to a new JQM page altogether

In this case the URL is stuck at the last nested page, when I need to tell JQM I’m actually still on the wrap-page (no matter what nested page is still in the URL).

Question:
So I’m looking for a way to update the URL to it’s correct value or a good way of setting the page paramaters to “factory-default” so JQM never knows I did any panel transitions on my nested page.

I have tried:

// 1. location hash - doesn't work

   window.location.hash = ""


// 2. ReplaceState - breaks on non-push-state browsers

   // on pageinit store defaults
   var $myState = {};   
   $myState.title = document.title;
   $myState.url = location.protocol + '//' + location.host + location.pathname;

  page.data("rememberState", $myState )

  // before leaving the wrap page
  var rem = $('#wrap.ui-page-active').data("rememberState");
  if (rem && typeof rem != 'undefined') {   
     history.replaceState('null',rem.title,rem.url);
     }

// 3. Reload the page when hiding the panel - crashes my browser :-)

   $.mobile.changePage('#wrap', {
                  allowSamePageTransition: true, 
                  changeHash:true,
                  transition:none 
                  });

Since I’m well off the JQM-path, I’m just looking for hints. Thanks for any pointer!

Answer 1

Solved it like this:

When the user first enters the site, I’m grabbing the number of history entries:

$windowHistoryAtInit = window.history.length

Say, there are 27 entries in the history, I would only want a new entry to be made when the user leaves page A and goes to page B, so all nested transitions inside pageA should not count towards the window.history total.

When the user is leaving the page, I re-check.

$(document).on('pagebeforehide', '#pageA', function(e, data) {
   // get number of history entries based on nested transitions
   var distance = window.history.length-self.options.$windowHistoryAtInit
   // go back distance
   window.history.go(-distance);     
   });

In my setup, going back the distance does not trigger actual JQM-transitions, so I’m merely taking the browser back to where it started when the user entered the site and then proceed with going from PageA to PageB.

I will probably have to tweak this by subtracting -50 from the counter, because I think it does not go above 50 entries. This way when entering with window.history.length 50, the counter starts “fresh” at 0.