Demos: Navigation PHP redirect: Add two-second delay to both the redi…

…rect script and the redirect target to illustrate loader behaviour and provide solution based on "pagecontainerload" alone.

demos/navigation-php-redirect/index.php

@@ -14,46 +14,28 @@
 	<script id="redirectCode">
 	$( document ).bind( "pagecontainerload", function( e, triggerData ) {
 
-		// We can use this event to recognize that this is a redirect. It is
-		// triggered when jQuery Mobile has finished loading a page, but before it
-		// has enhanced the page, and before it has altered the browser history. In
-		// this example the server helpfully returns a custom header. However, if
-		// you don't have access to the server side, you can still examine
-		// triggerData.page, which contains the page that was loaded, but which has
-		// not yet been displayed or even recorded in the browser history. You can
-		// also examine triggerData.xhr which contains the full XMLHTTPRequest. If
-		// there is a way to recognize that this is not the expected page, you can
-		// mark it with some jqmData that will be picked up in
-		// "pagecontainerbeforetransition" (below) which in turn will give you an
-		// opportunity to redirect (by calling the pagecontainer widget's change()
-		// method).
+		// We can use this event to recognize that this is a redirect. The event is
+		// triggered when jQuery Mobile has finished loading a page and inserting
+		// it into the DOM, but before it has altered the browser history. In this
+		// example the server helpfully returns a custom header. However, if you
+		// don't have access to the server side, you can still examine
+		// triggerData.page, which contains the page that was loaded, but which
+		// has not yet been displayed or even recorded in the browser history. You
+		// can also examine triggerData.xhr which contains the full XMLHTTPRequest.
+		// If there is a way to recognize that this is not the expected page, you
+		// can discard it and issue a second load() call for the page that really
+		// needs to be displayed to the user, reusing the options from the overall
+		// page change process.
 
 		var redirect = triggerData.xhr.getResponseHeader( "X-Redirect" );
 		if ( redirect ) {
 
-			// We have identified that this page is really a redirect. Mark it as
-			// such by setting some jqmData on it. The "pagecontainerbeforetransition"
-			// handler below will look for this data, and, if present, will perform
-			// the appropriate redirect.
-			triggerData.page.jqmData( "redirect", redirect );
-		}
-	});
-
-	$( document ).bind( "pagecontainerbeforetransition", function( e, data ) {
-
-		// Search for redirect data that has been set on the data.toPage by the
-		// "pagecontainerload" handler above If we find such data we know that we
-		// are supposed to perform a redirect.
-		var redirect = data.toPage.jqmData( "redirect" );
-
-		if ( redirect ) {
-
-			// The data has been found. Perform the appropriate redirect.
-			$( e.target ).pagecontainer( "change", redirect, data.options );
-
-			// Stop the process of loading the current page, because in the line
-			// above we've initiated the process of loading the redirect destination
-			// page, which is the page we wish to display to the user.
+			// We have identified that this page is really a redirect. Thus, we load
+			// the real page instead, reusing the options passed in. It is important
+			// to reuse the options, because they contain the deferred governing this
+			// page change process. We must also prevent the default on this event so
+			// that the page change process continues with the desired page.
+			$( e.target ).pagecontainer( "load", redirect, triggerData.options );
 			e.preventDefault();
 		}
 	});
@@ -73,10 +55,10 @@
 
 		<h1>Redirection example: Source Page</h1>
 
-		<p>Clicking the link below will cause a page to be loaded from the server which contains a special instruction that is captured in the sample code to load the final redirection target page.</p>
+		<p>Clicking the link below will cause a page to be loaded from the server which contains a special instruction that is captured in the sample code to load the final redirection target page. Note that both the initial page (which contains the redirect) as well as the final redirect target page contain an intentional delay that should simulate network congestion and should allow jQuery Mobile enough time to display the loading indicator.</p>
 
         <div data-demo-html="true" data-demo-js="#redirectCode" data-demo-php="source.php">
-            <a href="redirect.php?to=redirect-target.html" role="button" class="ui-shadow ui-btn ui-corner-all ui-btn-inline">Redirect</a>
+            <a href="redirect.php?to=redirect-target.php" role="button" class="ui-shadow ui-btn ui-corner-all ui-btn-inline">Redirect</a>
         </div><!--/demo-html -->
 
 		<p>Note: This is a PHP demo that will only work on a server and not in a build (i.e. the demos that come with each release).</p>

demos/navigation-php-redirect/redirect-target.html → demos/navigation-php-redirect/redirect-target.php

@@ -1,3 +1,6 @@
+<?php
+	sleep(2);
+?>
 <!DOCTYPE html>
 <html>
 <head>

demos/navigation-php-redirect/redirect.php

@@ -1,4 +1,10 @@
 <?php
+	// ************************************************************************
+	// The two-second sleep simulates network delays, hopefully causing a
+	// loading indicator message to appear on the client side.
+	// ************************************************************************
+	sleep(2);
+
 	$dst = ( isset( $_GET[ "to" ] ) 
 		? $_GET[ "to" ] 
 		: ( isset( $_POST[ "to" ] )