Question

I have a jquery mobile app that has a page. This page has three DIVs, I programmatically choose one of these DIVs based on a variety of variables. Regardless, the one DIV contains a select element. This element has 20 items in it. Because of the shear quantity, the select box opens in its own dialog. I’m fine with that, however, after a user makes a choice, the pagebeforeshow event of my hosting page is fired again. My problem is, I can’t seem to figure out how to detect that this event was fired as a result of the user choosing an option or closing the select dialog.

Is there a way to detect in the pagebeforeshow event how we got here?

Answer 1

jQuery mobile passes meta-data to the callback functions of most events. From the docs on pagebeforehow:

Triggered on the “toPage” we are transitioning to, before the actual transition animation is kicked off. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it:

• prevPage (object) – A jQuery collection object that contains the page DOM element that we are transitioning away from. Note that this collection is empty when the first page is transitioned in during application startup.

You should be able to use this in your callback function to branch to your advantage, i.e. detect if prevPage is the current page. This might look like:

$('#yourPage').live('pagebeforeshow', function(event, data) {
    var from = data.prevPage;
    // do some inspection of `from` and branch accordingly
    // might require some experimental console.logging first
});