Deja de mostrar la página

Quiero hacer algo como esto:

$(document).on("pagebeforeshow", "#myPage", function(event){ if(condition){ //I need to do something here to stop loading "myPage" ??? $.mobile.changePage("example.jsp"); } else { //continue showing actual page normally ... } }); 

No encontré ninguna forma de cambiar a la página “example.jsp” sin mostrar “myPage” por un segundo. ¿Hay alguna forma de hacer eso? Intenté usar cosas como window.stop() y event.stopPropagation() pero no funciona.

¡Gracias!

En su caso, debe escuchar el evento pagebeforechange para pasar mostrando data.toPage y mostrar otro.

El uso de pagebeforehide y pagebeforeshow dará como resultado que se muestren data.toPage y luego salten a la página de destino.

Manifestación

 // for demo purposes var condition = 0; // triggers when leaving any page $(document).on("pagebeforechange", function (e, data) { // id of page that you want to skip if condition is true/false, it's up to you var to_page = data.toPage[0].id; // skip showing #myPage if condition is true if (to_page == "myPage" && condition == 0) { // true! go to p3 instead $.mobile.changePage("#p3", { transition: "flip" }); /* prevent updating URL history and allow new transition if you want. Without this, #myPage will be pushed into $.mobile.urlHistory and any new transition (animation) will be neglected */ e.preventDefault(); } /* in the demo, if you change condition value, #p2 will be shown when condition returns "false". #myPage will be shown normally */ }); 

Nota: pagebeforechange disparará dos veces, es normal, no entre en pánico;)

Probado y funcionando:

html

 

Index page

Second page

Third page

jquery

 $(document).on('pagebeforechange', function(e, data){ var to = data.toPage; var from = data.options.fromPage; if (typeof to === 'string') { var u = $.mobile.path.parseUrl(to); to = u.hash || '#' + u.pathname.substring(1); if (from) from = '#' + from.attr('id'); if (from === '#index' && to === '#second') { e.preventDefault(); e.stopPropagation(); $.mobile.changePage( "#third"); } } }); 

jsfiddle

http://jsfiddle.net/tronc/GPUay/3/

Creo que la mejor manera de hacerlo sería tener la página oculta por defecto, y solo mostrarla si pasa el condicional. Entonces se vería así

CSS:

 #myPage { display: none; } 

JS:

 $(document).on("pagebeforeshow", "#myPage", function(){ if(condition){ $.mobile.changePage("example.jsp"); } else { $('#myPage').show() } }); 

Sé que si uso el evento “pagebeforechange” funciona bien, pero necesito hacerlo cuando la otra página está cargada (pero no se muestra). Encontré una solución que agrega un nuevo elemento DIV como un niño DIV de página, escondiéndolo y mostrándolo:

HTML

 
...

JS

 $(document).on("pagebeforeshow", "#myPage", function(){ $("#contentTarget1").hide(); if(condition){ $.mobile.changePage("#target2Page"); } else { $('#contentTarget1').show(); ... } });