1

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.

ScottR
  • 3,080
  • 3
  • 32
  • 35
  • Check this out: https://github.com/azicchetti/jquerymobile-router. Recommended by the JQM team. Saved me. – Jon Wells Sep 20 '12 at 16:17
  • I had seen that, but it looks like it requires a single-file system - where there isn't a orders.html and list.html - but a single app.html. This application will eventually be quite large - the DOM will be too big if it's all in the same file. More of a maintenance pain too. – ScottR Sep 20 '12 at 17:00
  • Yeah mines SPA. but it does allow you to pass parameteres around without it just caching the url first time around. I think configuring the router dynamically may be a pain too. – Jon Wells Sep 21 '12 at 08:32
  • @CrimsonChin Actually I ended up going with this, because the DOM issues can be mitigated. If you want to make it an answer, I'll give it to you. – ScottR Sep 28 '12 at 15:38

2 Answers2

0

You should indeed not use hash parameters for anything else than selecting pages when using jquery mobile.
The standard way to proceed is to pass your parameter with file.html?parameter=value and to retrieve the value through javascript.
You can then process this value with a js function that can for instance retrieve the data with an ajax call if you are online, or read it from local storage if you are offline. This can be done either by binding the changepage event if you want to generate your pages dynamically based on the data associated to the parameter, or by binding the pageinit event if you want to alter the page after it has been displayed (for instance fill in form elements)

Alternatively, if the use of the cache manifest prevents you from usingthe ?parameter=value syntax, you can use the following approach: - write your target link as file.html#pagename_itemvalue - bind the pagechange event in order to override the default behaviour, and instead parse the target value, retrieve pagename and itemvalue, and generate/access the content you want to display. You can see an example of that on this page

Romain
  • 1,292
  • 1
  • 10
  • 14
  • As I mentioned in the question - I cannot use page parameters as you mentioned due to it being an offline application. I need to put every possible page in the cache manifest. – ScottR Sep 20 '12 at 15:52
  • Being offline does not prevent you from accessing parameters. For instance, [this](http://stackoverflow.com/questions/1403888/get-url-parameter-with-jquery) would work in offline mode. – Romain Sep 20 '12 at 15:55
  • Yes, but the HTML 5 cache manifest requires that every page to be used offline must be in it. file.html?parameter=value is a different page than file.html, but file.html and file.html#o4572 are the *same* page according to the manifest. – ScottR Sep 20 '12 at 15:59
  • Thanks it's clearer, I have added an approach allowing you to overcome this limitation – Romain Sep 20 '12 at 16:09
  • Hmmm, that would require dynamically creating every page in the application (there'll be lots more pages, all with lots of parameters). It would work, but I'm not sure it's better than just turning off the default link behaviour. – ScottR Sep 20 '12 at 16:16
  • Actually once you have the pagename and itemvalue in your changepage event, you can change to "pagename" page, and use item value to do whatever you want with it, exactly as if you had had ?parameter=value – Romain Sep 20 '12 at 16:32
0

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 }
   });
Jack
  • 10,943
  • 13
  • 50
  • 65
  • I tried this, but I'm getting javascript errors on clicking links to a different page (eg on login.html, going to orders.html). Tracking through the code, it still looks like the jQuery mobile issues of transforming links to orders.html#orders?o=4572 into login.html#orders?o=4572. Dialogs also aren't working right. – ScottR Sep 21 '12 at 18:21
  • I'm not sure I understand exactly how you are linking from one page to another (it should be something like `orders.html?o=4572`), but you shouldn't be using a hash at all. If you are trying to access a specific page within another page, then you should realize that JQM [doesn't allow](http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html) that. – Jack Sep 21 '12 at 21:19
  • I need to use hash parameters because the cache manifest requires all pages be pre-declared. Having dynamic GET parameters in links would make that not possible. I tried linking with parameters to another page in various manners, but couldn't get it to work. – ScottR Sep 22 '12 at 06:57
  • I ended up using the router plugin, but in a single page configuration to support the hash parameters, so I'll give the answer to you because it's the closest. – ScottR Oct 01 '12 at 23:51