jQuery Mobile bug: page refresh while dialog is visible

Problem

Refreshing a page while a dialog is displayed causes an unnecessary ajax call and creates DOM nodes with duplicate IDs.

The problem is both functional and performance-related. DOM nodes with duplicate IDs can cause application problems, and unnecessary HTTP calls represent extra network overhead.

The likelihood of this occurring is high. Mobile devices are aggressive at reclaiming memory. If you switch away from your current page to a different tab or a different application, the page may fall out of memory. When you return to the tab, the browser will reload the URL, causing this bug to become apparent.

Version/environment:

jQuery Mobile beta 1, tested in Firefox 5, Chrome 12, Mobile Safari on iPhone 3G.

Repro steps:

(The base url is assumed to be http://.../dlgtest.html)

  1. Click the button to open a dialog Open a dialog. The current jQM page is declared inline in dlgtest.html, and has an id of #internalPage. The dialog is also declared inline, with an id of #internalDialog.
  2. Do not close the dialog, but instead just refresh the page.
  3. On the refreshed page, open the document inspector, and examine the jQM page elements (<div data-role="page" />) that have been created on the page.

Expected results

  1. When the dialog is displayed, the URL changes to http://.../dlgtest.html#internalPage&ui-state=dialog
  2. When the page is refreshed without closing the dialog, the url remains http://.../dlgtest.html#internalPage&ui-state=dialog
  3. Because #internalPage is declared inline in dlgtest.html, it is available immediately. There is no need to make an ajax call to retrieve it.
  4. The refreshed page shows only the underlying page (#internalPage); the dialog is not re-displayed.
  5. Using the document inspector to examine the page structure, there should only be one instance of the #internalPage div in the DOM.

Actual results

  1. When the dialog is displayed, the URL changes to http://.../dlgtest.html#internalPage&ui-state=dialog
  2. When the page is refreshed without closing the dialog, the url remains http://.../dlgtest.html#internalPage&ui-state=dialog
  3. After the page has loaded, the jQM framework makes an ajax call to the server, to retrieve dlgtest.html again.
  4. The framework extracts the #internalPage div from the ajax response, and injects it into the DOM.
  5. The refreshed page shows only the underlying page (#internalPage); the dialog is not re-displayed.
  6. Using the document inspector shows that there are now two instances of the #internalPage div in the DOM.

Dialog

Don't close me. Instead, refresh the page in your browser.