ajaxApp + changePage + dialogs

[Dylan]

I've got a mobile app whose homepage is, /m/, but users can navigate to and start from any subpage, such as /m/foo. On both of these (and many other pages), I have a dialog page with an id like, id="bar". The router needs to route on the whole path of the page, so that I've set ajaxApp to true.

For the purposes of the app, I have to programmatically use changePage() to show the dialog.

When the first page is /m/foo and the hash is empty, changePage("#bar") will show the dialog, and I get the whole series of transition events for the dialog, each given the route #bar. If I navigate to another page, though, say /m/foobar, such that the url is then /m/foo/#/m/foobar/, changePage("#bar") doesn't shown the dialog, but a pagebeforechange event fires with a route of #bar.

However, if I use changePage("/m/foo/#bar"), the dialog will display in all cases, and the route, /m/foo/#bar, matches my pattern '#bar'.

I could go with this second option by probably using changePage(window.location.pathname + "#bar"), but I'm wondering if there's a way by which I can avoid that.

[Andrea Zicchetti]

Hi,
sorry for the late answer. If I've understood correctly, you have both "remote" and "local" pages in your application.
Unfortunately jQuery mobile seems to mess things up when dealing with both of them at the same time.

You can try a couple of things:

• use a real dialog page, that is to say, something like /m/dialog
  You don't have to make a separate page, you can also couple it with other pages, but remember to set its data-url to a real application path (without using id="bar"):

<div data-role="dialog" data-url="/m/dialog"> etc...

This is the preferred method to handle dialogs in such a case

• try calling changePage with $("#bar")
  but this won't work if you need to pass parameters in the url your dialog

Cheers,
Andrea

[Dylan]

Hi,

Turns out that enabling pushState solved this issue for me.

PJ