I have an application with two main pages (a login page and a map page) that spawn dynamic pages to be used as dialogs, most of which have sub-pages, in a chained dialog structure.
So a perfectly normal course of action would be:
Login -> Map -> Dialog -> Sub-Dialog
Originally, I was moving from Map to Dialog using a button on the interface that looks like this:
- <a href="#dialogID" data-icon="arrow-r" data-iconpos="right" data-rel="dialog" data-role="button" data-theme="b" class="ui-btn-right">Info</a>
Using that system, I can navigate perfectly fine from Login through to Sub-Dialog and back again, using either the close button on the dialog, or the back button on the browser. The address bar updates as follows:
This is perfectly normal behaviour, and works fine as long as I follow the link with the data-rel="dialog".
But I wanted to change the behaviour of my site, so that when you click on a Google Maps marker object, it opens the dialog directly. I do this with the following:
- $.mobile.changePage($("#dialogID"), { role: "dialog" });
When I do this, navigating Back or hitting the Close button on the Sub-Dialog kicks me back to viewing the Login page. However, the URL is that of the Dialog state. So the URL is right, but what I see on the screen is wrong.
So instead of normally being able to go ABCD->DCBA, I'm now going ABCD->DA and skipping those two pages in the middle.
Is this a bug? Or am I using changePage wrong?
Here's an in-depth JSFiddle that exhibits the behaviour:
http://jsfiddle.net/LxFJq/14/
It seems to come up because of the dynamic pages. When they were static pages (
http://jsfiddle.net/hgb7s/2/
) It all works like expected. The dynamic pages break the navigation, but only in the edge case of clicking from an event handler. At least I've narrowed it down.
I needed to add data-url attributes to my pages. These are added by the <a> tag, not by .changePage(). This may be considered a bug. It may be a feature.