Fix for issue #363: Page loading error method

js/jquery.mobile.core.js

@@ -196,6 +196,23 @@
 			else {
 				$window.trigger( "hashchange", [ true ] );
 			}
+		},
+
+		// display an auto-fade message box.
+		messageBox: function( message, delay ){
+			// default delay is 800ms.
+			if ( delay === undefined )
+				delay = 800;
+
+			// no duplicate message boxes.
+			$( "div[data-role='message-box']" ).remove();
+			var $box = $( "<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all' data-role='message-box'><h1></h1></div>" );
+			$box.find( "h1" ).text( message );
+			$box.css({ "display": "block", "opacity": 0.96, "top": $window.scrollTop() + 100 })
+				.appendTo( $.mobile.pageContainer )
+				.delay( delay )
+				.fadeOut( 400, function(){ $(this).remove(); } );
+			return $box;
 		}
 	});
 

js/jquery.mobile.navigation.js

@@ -574,13 +574,7 @@
 					if(base){
 						base.set(path.get());
 					}
-					$("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>Error Loading Page</h1></div>")
-						.css({ "display": "block", "opacity": 0.96, "top": $(window).scrollTop() + 100 })
-						.appendTo( $.mobile.pageContainer )
-						.delay( 800 )
-						.fadeOut( 400, function(){
-							$(this).remove();
-						});
+					$.mobile.messageBox( "Error Loading Page" );
 					releasePageTransitionLock();
 				}
 			});

tests/unit/core/core.js

@@ -145,5 +145,21 @@
 			stop();
 			$.testHelper.reloadLib(libName);
 		});
+
+		test( "messageBox appears and removes itself", function(){
+			same( $( "div[data-role='message-box']" ).length, 0, "no message box to begin with" );
+			$.mobile.messageBox( "Baba yetu" );
+			same( $( "div[data-role='message-box']" ).length, 1, "added one message box" );
+			same( $( "div[data-role='message-box'] h1").text(), "Baba yetu", "message is correct" );
+			$.mobile.messageBox( "yetu uliye" );
+			same( $( "div[data-role='message-box']" ).length, 1, "no duplicate message boxes" );
+			same( $( "div[data-role='message-box'] h1").text(), "yetu uliye", "message is correct" );
+			stop();
+
+			setTimeout( function(){
+				same( $( "div[data-role='message-box']" ).length, 0, "message box removed after 1.5s" );
+				start();
+			}, 1500);
+		});
 	});
-})(jQuery);
+})(jQuery);