jQuery Mobile multipage setup page during transition

Question

I'm building an app based on jQuery mobile, and using the multi-page template feature as described here. That is I have several divs with data-role="page".

The problem is that I need to load in some JSON and build up the second 'page' based on a selection on the first page. How can I insert some code to be run during the page transition (i.e. while the spinner is up). Note that the user could go back to the first page again and make a different choice - so I would need to run the code to build up 'page' 2 again.

Does this make sense? I find the documentation really hard to follow - but maybe I'm missing something really obvious. Thanks!

Answer 1

You could use the "pagebeforeshow" event that jQuery Mobile provides http://jquerymobile.com/test/docs/api/events.html

Here's how the event works according to the docs: "Triggered on the "toPage" we are transitioning to, before the actual transition animation is kicked off."

Something like this:

$(document).on("pagebeforeshow", "#myPageId", function() {
    //Stuff here
});