Routing with external pages

[msteinhoff]

Hi,

I have separated my pages in multiple files and am loading and caching the sub-pages at pageinit of the root page, so navigation is still done with hash changes and I can re-use pages.

Now I have a subpage at /path/file.html which contains a page with id #foo. When opening a link #foo?bar1=baz1 while already on page #foo, the pagebeforechange handler seems to be broken because it checks the toPage hash (which is #foo) against the current page's data-url (which is /path/file.html) to see if allowSamePageTransition needs to be activated.

This fails silently and nothing happens when clicking on the link.

I have modified the pagebeforechange handler to also check the id of the current page against the hash and this works in my case, but I do not have enough knowlege of JQM to determine if this is expected behavior or a bug.

I am running with JQM 1.1.0 and JQMR 0.81.

Mario

[azicchetti]

Hi Mario, as far as I know, jquery mobile looks at the data-url to perform page transitions, the id is not really accounted for this matter.

In your specific scenario, jquery mobile expects you to call changePage with /path/file.html?bar=bar1 instead of #foo?bar=bar1, because the data-url of the loaded page is /path/file.html (even though this would result in another ajax call, because the data-url doesn't match since the parameters are different).

I agree that this is quite strange and may lead to some unexpected mess, so a simple solution (untested with the latest jqm version) would be to manually change the data-url [using jqmData()] of your page to "foo" after it's inserted in the dom, so that it adheres to jqm standards.

I'd like to hear from you whether this solves your problem without patching the router itself.

Cheers, Andrea

[msteinhoff]

Hi Andrea,

Yes, I know about data-url. I am using the id because i ran into problems with jQuery mobile using external pages and parameters.

When calling /path/file.html?bar=bar1 directly, JQM loads the page and executes all event handlers, but sets the data url to /path/file.html?bar=bar1. When calling the same page with ?bar=bar2, the page is loaded again with a data-url of /path/file.html?bar=bar2 and I end up having the same page twice in the DOM, causing all sorts of weird behavior.

From a URL loading perspective this may seem to be correct as those URLs may represent different resources, but in the context of a JQM application this defeats multi-page documents with parameters completely. Using something like /page.html#id-of-first-page?bar=bar1 did not work either although I don't know exactly know what the problem was there.

What I am currently doing is enabling DOM caching and putting together a list of files to load with loadPage() on the pageinit event of the first page and using just ids for navigation, so essentially I am simulating a single page document.

I was already thinking about manually changing the data-url afterwards but I currently have not the time to dig through the whole JQM code to search for problems or side-effects caused by a manual change of the data-url. Currently the change in the router works and I also need to build the actual application with deadlines and stuff :) I'll test this when I have some time left in one or two weeks.

Looks like this could be either a bug in jQuery mobile itself or maybe lack of documentation.

[azicchetti]

Hi, as you've noticed, jqm can be difficult to use in "hybrid" applications that make use of external pages in a single-file-multi-page application.

Since you have deadlines and stuff (eheh) patching the router is the safest choice, even though I think that manually changing the data-url should be safe too. Unfortunately the documentation on this subject is lacking or incomplete.

[msteinhoff]

Hi,

After 4 hours of endless pain I decided to disable AJAX navigation completely. Either jQuery Mobile ajax navigation is broken completely or I am using it wrong.

I removed the patch for JQMR and simulate a multi-page template by

• enabling the dom cache
• disabling dynamic base tags
• removing the <base> tag from the page completely and using only absolute URLs
• loading all required pages on the pageinit event with loadPage()
• using the existing but undocumented $.Deffered object returned by loadPage() to
  • set data-url to the html #id and
  • set data-external-url to false after each page has loaded

• using hashes only (with optional parameters) for navigation

  This seems to work for now.

[azicchetti]

I understand your pain mate...

Just to add something unrelated to this specific issue, but regarding jqm, ajax, phonegap applications and so on, it turns out that phonegap applications, using jquery mobile with single page templates and ajax WON'T WORK on android >=3 if the developer makes use of parameters in the url (such as: list.html?type=3) due to a bug in the webview code of the OS. It took almost an year to google engineers to fix the bug and we still don't know when the patch will be released publicly on devices.

To sum everything up, when it's not jquery mobile that makes our heads ache, it's either Android or iOS... (and as far as iOS is concerned, they introduced an enormous bug a few releases ago, in fact, cookies were automatically disabled in some obscure circumstances from webviews AND safari itself when iCloud bookmark synching was enabled...). This job really sucks!