Why does jQueryMobile reload the page when I close the dialog box?

Question

I am loading the jQueryMobile dialog using this code:

<a data-rel="dialog" href="/path/to/dialog?arg1=val1" data-theme="b" id="deleteButton" class="ui-btn-right home" data-direction="reverse" data-transition="slidedown">Delete</a> 

There are two buttons in my dialog:

 <a data-role="button" href="/path/to/page/that/showed/dialog" id="deleteAddressButton" data-rel="back">Delete</a> <a data-role="button" data-theme="a" href="/path/to/page/that/showed/dialog" data-rel="back">Cancel</a> 

When I click the buttons, the dialog closes and returns to the page that opened the dialog. However, the page that opens the dialogs reloads through ajax, which seems unnecessary and violates everything. Does anyone know why this is happening? Should the dialog just close without reloading the calling page?

Note. The calling page only reloads if I initially go to another page, for example:

Homepage → Dialog Page → Dialogue

The problem occurs when I first go to the home page and then to the page that brings up the dialog. If I do a full reload of the page on the page that invokes the dialog, and then open and close the dialog, the page that invokes the dialog will not be reloaded through ajax.

Edit: this also happens on the jQuery Mobile documentation site. To see this:

• Go to http://jquerymobile.com/demos/1.0.1/
• Go to Pages and Dialogs
• Go to the "Dialogs" section
• Click on the first button "Open dialog".
• Use Firebug or something similar to viewing Ajax calls.
• Close the dialog with any button.
• Note that Ajax calls are launched to reload the calling page.

Answer 1

The jQuery Mobile website does the same, so this should be the default behavior.

Answer 2

This seems to be a bug, and I opened the problem for jquery-mobile on github along with the patch.

Answer 3

Edit

A simple solution is to use a non-ajax link for the page causing the dialog

 <a href="url/to/page-that-calls-dialog" data-ajax="false">...</a> 

This works by losing the DOM cache and having to reload the entire page.

It looks like we should wait until jQuery gives the correct behavior to the dialog widget.

Cause

This is because jQuery mobile only stores three pages in the DOM:

• The page loaded for the first time (the main page in your case).
• Transition page (one with loading animation).
• The page you are going to (dialogue page in this case).

The first one lives until you complete navigation without an ajax (for example, refresh the browser or enter the URL, and then press the enter key), if so, the new one will be the first.

The second appears only when you go to another page and live in the same period of time as the first.

The third always contains a new page that you go to, and (here is the “troll magic”) it is replaced every time you navigate using ajax .

In this order of ideas:

• When you enter your "home page", the first page is set to your "home page".

• When you go to the "Page that brings up the dialog" page, the sencond page is created, and the third is the "Call that dialog page".

• When you invoke your dialog box, it replaces the previous third page, so your "Page Invoking Dialog" is removed from the DOM.

Answer 4

Are you doing anything in the pageShow callback? Because this is probably what causes it. The "pageShow" event will be fired again after the dialog box is hidden.

If you do not want it to show, you need to either rebuild your code to process it accordingly, or use "pageLoad" instead of showing the page. Here is a link to JQM docs that describe this behavior: http://jquerymobile.com/test/docs/api/events.html

Answer 5

Edit

This is a trick and make sure you use the $ ('# yourDialog') dialog. ("close") $.mobile.page.prototype.options.domCache = true;

I can confirm that while only closing the page starts when I close the dialog box, jQM still performs an AJAX request for this page. It would be nice if this was not the only way, but so far everything looks like this.