Why does the jQueryMobile dialog box close button sometimes throw me to my homepage?

Question

I have an application with two main pages (login page and map page) that spawn dynamic pages that will be used as dialogs, most of which have subpages, in the conversation chain.

So, the completely normal course of action:

Login → Map → Dialog → Subdialog

Initially, I moved from the map to the 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 this system, I can move perfectly from logging in to Sub-Dialog and vice versa using the close button in the dialog box or the back button in the browser. The address bar is updated as follows:

 Login Page: http://serverName/ Maps Page: http://serverName/#page-map Dialog: http://serverName/#page-map&ui-state=dialog Sub-Dialog: http://serverName/#page-map&ui-state=dialog&ui-state=dialog 

This is a completely normal behavior and works great as long as I follow the link with the data-rel = dialog box.

But I wanted to change the behavior of my site, so when you click on the Google Maps marker object, it opens a dialog box directly. I do this with the following:

 $.mobile.changePage($("#dialogID"), { role: "dialog" }); 

When I do this, going backward or clicking the Close button on the Sub-Dialog returns me to viewing the login page. However, the URL is the status of the dialog box. So the URL is right, but what I see on the screen is wrong.

So, instead of normally being able to go ABCD-> DCBA, now I go ABCD-> DA and skip these two pages in the middle.

Is this a bug in jQueryMobile? Or am I using changePage incorrectly?

EDIT: Here's a detailed JSFiddle showing the behavior: http://jsfiddle.net/LxFJq/14/ This seems to be related to dynamic pages. When they were static pages (http://jsfiddle.net/hgb7s/2/), everything worked as expected. Dynamic pages break navigation, but only as a last resort of a click from an event handler. At least I narrowed it down.

SOLVED: I myself solved the problem.

The <a data-rel = "dialog"> tag will automatically add the data URL attribute to the new page. The changePage () function will not. So I added them myself, and everything works. Result of working with data-rel attributes at http://jsfiddle.net/LxFJq/15/

Found this information based on the first two comments from this: https://gist.github.com/1037934

Answer 1

I myself solved the problem.

The <a data-rel = "dialog box will automatically add the attribute of the data URL to the new page. There will be no changePage () function. Therefore, I added them myself and everything works. The result is http://jsfiddle.net/LxFJq/15 /

Found this information based on the first two comments from this: https://gist.github.com/1037934

I presented this as a bug for the jQueryMobile GitHub repo. (Now I have to wait two days to accept my own answer.)