Timed delayed auto page redirect JQuery Mobile

Question

Hi I am trying to make a page redirect automatically to another page, in a JQM multi-page index. I also want the redirect to be delayed for about 3 seconds. So basically i want #behavior-summary (show up for 3 seconds) and go back to #order-summary automatically without clicking. I know there's probably a simple solution to this. I've tried many of the answers here, but the don't seem to work. I am using JQ 2.1.4 and JQM 1.4.5.

For a side not this is not a splash screen, it going to be a .gif that shows animation confirmation after a user input an item. right now i'm just using a button as you can see on #behavior-summary. The goal is to be able to remove the , no button just straight redirect after a specified period of time.

Here are some solutions that i've tried that does not work for some reason:

Example 1

Example 2

If anyone can help with this, i would greatly appreciate it

<div data-role="page" id="order-summary">
   <div data-role="header">
        <h1>Record Drink</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
   </div>
   <div data-role="content" id="summary-img">
        <img src="img/behavior_4.png"/>
        <a href="#behavior-summary" class="ui-btn ui-corner-all ui-btn-a" >Save</a>
   </div>
</div>    


<div data-role="page" id="behavior-summary">
    <div data-role="header" id="record-header">
        <h1>Record Drink</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    </div><!-- /header -->
    <div data-role="content" id="summary-img">
        <img src="img/drink_1.gif"/>
        <a href="#order-summary" class="ui-btn ui-corner-all ui-btn-a" >Save</a>
    </div>
</div>

Thank you in advance!

Answer 1

You could use the pageshow event of behavior-summary, and then a setTimeout with 3 second delay and a pagecontainer change method to go back to the first page:

$(document).on("pageshow","#behavior-summary", function(){ 
  setTimeout(function(){
    $(":mobile-pagecontainer").pagecontainer( "change", "#order-summary", {} );
  }, 3000);
}); 

DEMO

If you prefer the pagecontainer events:

$(document).on( "pagecontainershow", function( event, ui ) {
  if (ui.toPage.prop("id") == "behavior-summary" ){
    setTimeout(function(){
      $(":mobile-pagecontainer").pagecontainer( "change", "#order-summary", {  } );
    }, 3000);  
  }
});