title: Why does a jQueryMobile dialog close button knock me back to my main page sometimes?
body: <p>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.</p>
  
  <p>So a perfectly normal course of action would be:</p>
  
  <p>Login -> Map -> Dialog -> Sub-Dialog</p>
  
  <p>Originally, I was moving from Map to Dialog using a button on the interface that looks like this:</p>
  
  <pre><code>&lt;a href="#dialogID" data-icon="arrow-r" data-iconpos="right" data-rel="dialog" data-role="button" data-theme="b" class="ui-btn-right"&gt;Info&lt;/a&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>Login Page: http://serverName/
  Maps Page: http://serverName/#page-map
  Dialog: http://serverName/#page-map&amp;ui-state=dialog
  Sub-Dialog: http://serverName/#page-map&amp;ui-state=dialog&amp;ui-state=dialog
  </code></pre>
  
  <p>This is perfectly normal behaviour, and works fine as long as I follow the link with the data-rel="dialog".</p>
  
  <p>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:</p>
  
  <pre><code>$.mobile.changePage($("#dialogID"), { role: "dialog" });
  </code></pre>
  
  <p>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.</p>
  
  <p>So instead of normally being able to go ABCD->DCBA, I'm now going ABCD->DA and skipping those two pages in the middle.</p>
  
  <p>Is this a bug in jQueryMobile? Or am I using changePage wrong?</p>
  
  <p><strong>EDIT:</strong> 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.</p>
  
  <p><strong>SOLVED:</strong> I solved the problem myself.</p>
  
  <p>The &lt;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 <a href="http://jsfiddle.net/LxFJq/15/" rel="nofollow">http://jsfiddle.net/LxFJq/15/</a></p>
  
  <p>Found this information based on the first two comments from this: <a href="https://gist.github.com/1037934" rel="nofollow">https://gist.github.com/1037934</a></p>