Stop showing page

Question

I want to do something like this:

$(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
      ...
   }
});

I didn't found any way to change to "example.jsp" page without showing "myPage" for like a second. Is there any way to do that? I tried using things like window.stop() and event.stopPropagation() but it doesn't work.

Thank you!

Answer 1

In your case, you need to listen to pagebeforechange event to pass showing data.toPage and show another one.

Using pagebeforehide and pagebeforeshow will result in showing data.toPage and then jump to the target page.

Demo

// 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 */
});

Note: pagebeforechange will fire twice, it's normal, don't panic ;)

Answer 2

Tested and working:

html

<div data-role="page" id="index">
    <div data-role="header">
        <h1>Index page</h1>
    </div>

    <div data-role="content">
        <a data-role="button" href="#second">To second page</a>
    </div>
</div>
<div data-role="page" id="second">
    <div data-role="header">
        <h1>Second page</h1>
    </div>

    <div data-role="content">

    </div>
</div>   
<div data-role="page" id="third">
    <div data-role="header">
        <h1>Third page</h1>
    </div>

    <div data-role="content">

    </div>
</div>            

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/

Answer 3

I think the best way to do this would be to have the page hidden by default, and only show it if it passes the conditional. So it would look like this

CSS:

#myPage {
  display: none;
}

JS:

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

Answer 4

I know if I use "pagebeforechange" event it works fine, but i need doing it when the other page is loaded (but not shown). I've found a solution adding a new DIV element as a page DIV child, hiding and showing it:

HTML

<div id="target1Page" data-role="page">
   <div id="contentTarget1">
   ...
   </div>
</div>

JS

$(document).on("pagebeforeshow", "#myPage", function(){
   $("#contentTarget1").hide();

   if(condition){
      $.mobile.changePage("#target2Page");
   } else {
      $('#contentTarget1').show();
      ...
   }
});