How to detect/query currently ongoing changepage / transition in jQuery Mobile?

Question

How can I detect/query, whether a changepage / transition is currently ongoing in jQuery Mobile (jQM)?

My goal is to prevent opening a dialog when a switch between pages is currently happening. Currently, th UI breaks when a dialog opens while a changepage event is ongoing.

Any Ideas on that?

Answer 1

In JQM 1.4.0 the class ui-mobile-viewport-transitioning is added the body tag during transitions so the following works for me:

if (!$("body.ui-mobile-viewport-transitioning").length) {
   //do something
}else{
    console.log("Don't do it we are transitioning")
    return false
 }

Answer 2

• pagebeforeshow

Triggered on the page being shown, before its transition begins.

• pagebeforehide

Triggered on the page being hidden, before its transition begins.

• pageshow

Triggered on the page being shown, after its transition completes.

• pagehide

Triggered on the page being hidden, after its transition completes.

http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html

Answer 3

I didn't find transition state information within jQuery Mobile, however you can simply add three events, one before and one after the change and one for when the page change has failed. Then, keep in a global variable whether a transition is currently occuring:

window.transitioning = false;

$(document).on("pagebeforechange", function() { transitioning = true; });
$(document).on("pagechange", function() { transitioning = false; });
$(document).on("pagechangefailed", function() { transitioning = false; });

In this example, I create a global variable transitioning but you could create this variable where you see fit, eg making a local variable in your dialog handler rather than using a global variable.

You can now add your condition like this:

if(!transitioning) {
  // Do your stuff
} else {
  // Delegate the events by listening for pagechange and then do your stuff
}