Make data-role=page elements optional. This change makes the framework more lenient with markup, and will ease integration with existing sites, as well as mashups with external content. Unit tests included. Fixes jquery-archive#2096

scottjehl · scottjehl · commit 259815d48052 · 2011-07-17T14:52:49.000-04:00
diff --git a/js/jquery.mobile.init.js b/js/jquery.mobile.init.js
@@ -73,6 +73,12 @@
 		initializePage: function(){
 			//find present pages
 			var $pages = $( ":jqmData(role='page')" );
+			
+			//if no pages are found, create one with body's inner html
+			if( !$pages.length ){
+				$pages = $( "body" ).wrapInner( "<div data-" + $.mobile.ns + "role='page'></div>" ).children( 0 );
+				console.log("page wasn't needed")
+			}
 
 			//add dialogs, set data-url attrs
 			$pages.add( ":jqmData(role='dialog')" ).each(function(){
diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js
@@ -648,6 +648,9 @@
 							&& RegExp.$1 ) {
 						url = fileUrl = path.getFilePath( RegExp.$1 );
 					}
+					else{
+						
+					}
 
 					if ( base ) {
 						base.set( fileUrl );
@@ -656,6 +659,11 @@
 					//workaround to allow scripts to execute when included in page divs
 					all.get( 0 ).innerHTML = html;
 					page = all.find( ":jqmData(role='page'), :jqmData(role='dialog')" ).first();
+					
+					//if page elem couldn't be found, create one and insert the body element's contents
+					if( !page.length ){
+						page = $( "<div data-" + $.mobile.ns + "role='page'>" + html.split( /<\/?body[^>]*>/gmi )[1] + "</div>" );
+					}
 
 					if ( newPageTitle && !page.jqmData( "title" ) ) {
 						page.jqmData( "title", newPageTitle );
diff --git a/tests/unit/init/init_core.js b/tests/unit/init/init_core.js
@@ -212,5 +212,27 @@
 			}, 500);
 		});
 		
+		asyncTest( "page element is generated when not present in initial markup", function(){
+			expect( 1 );
+			
+			$("<iframe src='nopage.html'>").appendTo("body").load(function(){
+				ok( $(this).contents().find( ".ui-page" ).length, 1 );
+				$(this).remove();
+				start();
+			});
+		});
+		
+		asyncTest( "page element is generated when not present in ajax'd markup", function(){
+			expect( 1 );
+			$.mobile.changePage( "nopage.html" );
+			
+			$( ":jqmData(url$='nopage.html')" ).live( "pagecreate", function(){
+					ok(true, "page was created from dynamically loaded HTML that contained no page div" );
+					start();
+			} );
+		});
+		
+		
+		
 	});
 })(jQuery);
diff --git a/tests/unit/init/nopage.html b/tests/unit/init/nopage.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>jQuery Mobile Init Test Suite</title>
+	<script src="../../../js/jquery.js"></script>
+	<script src="../jquery.setNameSpace.js"></script>
+	<script src="../../../js/"></script>
+	
+</head>
+
+<p>testing</p>
+
+</body>
+</html>
