Home/ Questions/Q 8607177
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T03:17:04+00:00

I have an application with two main pages (a login page and a map

  • 0

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:

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 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 in jQueryMobile? Or am I using changePage wrong?

EDIT: 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.

SOLVED: I solved the problem myself.

The <a data-rel=”dialog”> tag will automatically add a data-url attribute to the new page. The changePage() function will not. So I added them myself, and everything works. Working result, 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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I solved the problem myself.

    The <a data-rel=”dialog”> will automatically add a data-url attribute to the new page. The changePage() function will not. So I added them myself, and everything works. Working result at http://jsfiddle.net/LxFJq/15/

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

    I’ve submitted this as a bug to jQueryMobile’s GitHub repo.
    (Now I have to wait two days to accept my own answer.)

    • 0