We adore using jQuery mobile in MobileIgniter modules. The page transitions, design elements and flexibility to work on multiple sizes of device makes it an ideal visual framework.
But, after building out a couple of prototypes we noticed a disturbing problem. App users in highly interactive modules with lots of interactions would pile up a huge backlog of events in their history. Hitting the back button, either the software button in iOS or the system button on Android, would take the user step by step back through every action if they wanted to get back to the main app screen. After checking distance with GPS and keeping score for 18 holes using our Virtual Caddy module, getting back to the app home screen would require 50 clicks. Not good.
We decided we had to take control of history. The Virtual Caddy module has self-contained navigation allowing a golfer to navigate from hole to hole, to and from the score card, and any combination of the former. There is no need for a back button to move around the module. If we could just turn the history off, the back button could just be used to get back to the app home screen.
We addressed the problem with a two step approach. First, we needed a mechanism so that we could treat every page transition the same way. If you’re familiar with MVC, we needed an agent in our controller to handle every transition. jQuery Mobile makes this dead simple:
$(document).bind( “pagebeforechange”, function( e, data ) {…}
Cool. Once we have that in place, we can send every page change through a single process. Now for the bit about not writing to the history. jQM has this covered as well:
$.mobile.changePage(…)
This method takes a destination to change to as well as a set of options. It’s good to have options. In this case, they allow us to erase the history books using:
{reverse: false, changeHash: false}
Now we can move about our module freely without the system being any the wiser. The back button just takes us out of the module.
—————-
UPDATE
—————-
Here’s a code snippet of mobile.changePage with the options set from the jQuery Mobile Documentation
//transition to the "confirm" page with a "pop" transition without tracking it in history
$.mobile.changePage( "../alerts/confirm.html", { transition: "pop", reverse: false, changeHash: false } );
We typically write single page apps and a hash tag referencing a jQM ‘page’ works just like a URL as the first argument. A jQuery object works, as well.
