Understanding jQuery-Mobile page firing events - why dialog pageshows when closing

Question

I'm relatively new to jQuery-Mobile and I'm trying to understand what's happening when a page or dialog loads.

I created a small set of files to illustrate the oddity I'm seeing. Please see https://github.com/kanesee/jqm-event

The simple example just has an index page that prints Hello World. There's a button that opens a dialog, by opening another page, called dialog.html. I print out whenever either page fires a pageshow or pagehide event.

This is the sequence of actions.

1. Open index.html: (index's pageshow fires as expected)
2. Click on dialog link and dialog pops up: (then this sequence of events fire: index pagehide, dialog pagehide, index pageshow, dialog pageshow)
3. Close dialog: (index pagehide, dialog pagehide, index pageshow, dialog pageshow)

I don't understand why when the dialog opens, that sequence fires. I understand index pagehide since we're transitioning out of the index page. Not sure why the dialog's pagehide fires next. Not sure why index's pageshow fires. I understand why dialog's pageshow fires last.

I also don't understand why the sequence fires during dialog close. Not sure why index's pagehide fires. I understand why dialog pagehide fires and then why index pageshow fires. Not sure why dialog pageshow fires again at the end.

If anyone can help explain this odd sequence of events, I'd appreciate it. I've looked at this sequence diagram but I'm not sure I fully understand it: http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html

Answer 1

Simply because pageshow and pagehide will fire on any page. In your code you haven't delegated the event to neither index or dialog. Those events are bound to document, so will fire on all pages to come.

If you do the below, you'll notice the difference.

$(document).on("pageshow", "#index", function () {
  console.log("Page is shown");
});

It will only fire on index page (with id="index") when it is visible.

---

Update

In your code, you haven't attached pageshow and pagehide to specific pages. Both events fire on data-role="page" and data-role="dialog" when they are either visible or hidden.

In index.html, you have the below code.

$(document).on('pageshow', '#indexpage', function(event) {
  console.log('pageshow index.html');
});

$(document).on('pagehide', '#indexpage', function(event) {
  console.log('pagehide index.html');
});

On start-up, console log will print

pageshow index.html

When you move from index.html to dialog.html (via Ajax), console log will print

pagehide index.html

But before console log prints pagehide index.html, the below code in dialog.html is loaded into DOM along with HTML and executed.

$(document).on('pageshow', '#dialogPage', function(event) {
  console.log('pageshow dialog.html');
});

$(document).on('pagehide', '#dialogPage', function(event) {
  console.log('pagehide dialog.html');
});

Therefore, pagehide will fire twice when moving from index.html to dialog.html. Also, it will fire twice when moving from dialog.html back to index.html. At this moment, pageshow will fire twice as well.

Console log will print the following:

1. Start-up

   pageshow index.html

2. From index.html to dialog.html

   pagehide index.html -> pagehide dialog.html -> pageshow index.html -> pageshow dialog.html

3. From dialog.html to index.html

   pagehide index.html -> pagehide dialog.html -> pageshow index.html -> pageshow dialog.html

Solution:

Be specific when using pagebeforehide, pagebeforeshow, pagehide and pageshow events

$(document).on("pageshow", "#pageID", function () {
  /* do something */
});