jQuery mobile issues with offline web app

Question

I'm developing an application using jQuery mobile, that will be using HTML5 offline capabilities (cache manifest, etc).

Basic program is for on-field technicians to view/modify their orders on a tablet with no internet connection. I'm using a local browser database to store the orders.

I have an orders.html page which can view any order - but to pass a parameter to it, I can't use GET parameters, because the program is offline and I can't list every single order in the manifest.

So I have to use hash parameters - eg orders.html#o4572. But jQuery mobile doesn't play nice with this scheme - it uses hash parameters for it's own schemes. When I'm on list.html and there's a link to orders.html#o4572 - it turns the link into list.html#o4752 and stays on the same page.

I can turn off jQuery mobile's link handling by setting $.mobile.linkBindingEnabled = false; but this prevents all ajax navigation - you lose the nice transitions, and pop-up dialogs don't 'just work' anymore, you have to do them manually. And there may be other issues.

Is this the only way of getting this to work properly? I'm just starting to use jQuery mobile, so I feel like I'm missing something.

Answer 1

I have done something similar using the jquery-mobile-router plugin with a single page app that has a offline mode, however it should work the same for a multipage app since with a multi-page app the default behavior (ajax-enabled set to true) of JQM is that it pulls in the second page and attaches it to the DOM of the current page.

Using the JQM router you should be able to do something like this

var router;

var orderHandlerRoute = function (eventType, matchObj, ui, page, evt) {
  var params = router.getParams(matchObj[1]);
  //use your params to pull data from localStorage  
};

router =  new $.mobile.Router({
     'orders.html(?:[?/](.*))?' : {handler: "orderHandler", events: 'bs'}
     , {orderHandler: orderHandlerRoute }
   });