CODEWITHSUNDEEP
jquery-mobile
offex
offex

Reputation: 1885

Why is jQueryMobile reloading the page on dialog close?

I load a 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>

My dialog has two buttons:

<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 opened the dialogs is being reloaded via ajax, which seems unnecessary and is breaking things. Does anyone have any idea why this happening? Shouldn't the dialog just be able to close without reloading the calling page?

Note: The calling page is only reloaded if I originally go to a different page, for example:

Home page -> Page that calls dialog -> Dialog

The problem happens when I go to home page first, then page that calls dialog. If I do a full page reload on Page that calls dialog and then open and close the dialog, the page that calls dialog is not reloaded via ajax.

Edit: This is happening on jQuery Mobile's documentation site also. To see this:

  1. Go to http://jquerymobile.com/demos/1.0.1/
  2. Navigate to "Pages & Dialogs"
  3. Navigate to "Dialogs"
  4. Click on the first "Open Dialog" button.
  5. Use Firebug or something similar to watch the Ajax calls.
  6. Close the dialog using either button.
  7. Notice that Ajax calls are fired to reload the calling page.

Upvotes: 4

Views: 10148

Answers (5)

maurice2k
maurice2k

Reputation: 31

It seems to be a bug and I've opened an issue for jquery-mobile at github along with a patch.

Upvotes: 3

JeyDotC
JeyDotC

Reputation: 36

Edit

An easy solution is to use a non-ajax link for the page that calls the dialog

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

That works at the cost of losing the DOM cache and having to reload the entire page.

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

The reason

That happens because jQuery mobile keeps only three pages in the DOM:

  1. The page that got loaded first time (The Home page in your case).
  2. The transition page (The one with the 'loading' animation).
  3. The page you are navigating to (The dialog page in this case).

The first one lives until you do a non-ajax navigation (e.g. refresh the browser or type the URL and then press enter) if so, the new one becomes the first page.

The second one only apears when you are changing to another page, and lives the same timespan than the first.

The third one always holds the new page you are navigating to, and (here is the 'troll-magic') it's replaced each time you navigate using ajax.

In this order of ideas:

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

  • When you go to your "Page that calls dialog" the sencond page is created an the third one is set to "Page that calls dialog".

  • When you call your dialog, this replaces the former third page, so your "Page that calls dialog" gets removed from DOM.

Upvotes: 2

Clarence Liu
Clarence Liu

Reputation: 4019

Edit

This does the trick, and make sure you're using $('#yourDialog').dialog('close') $.mobile.page.prototype.options.domCache = true;

I can confirm that even though only the pageshow is firing when closing the dialog as expected, jQM still does an AJAX request for the page. It'd be nice if this wasn't the only way, but so far it looks as if that's so.

Upvotes: 1

offex
offex

Reputation: 1885

jQuery Mobile's website does the same thing so it must be the default behavior.

Upvotes: 0

gabaum10
gabaum10

Reputation: 3827

Are you doing anything in the "pageShow" callback? Because that's probably what's causing this. The "pageShow" event is going to get fired again once you hide the dialog.

If you don't want it to show, you are going to either need to restructure your code to handle this accordingly, or use the "pageLoad" instead of page show. Here is a link to the JQM docs describing this behavior: http://jquerymobile.com/test/docs/api/events.html

Upvotes: 1

Related Questions