Skip to content
This repository
Browse code

Make data-role=page elements optional. This change makes the framewor…

…k more lenient with markup, and will ease integration with existing sites, as well as mashups with external content. Unit tests included. Fixes #2096
  • Loading branch information...
commit 259815d4805250aba0369283d3180e9d4ea1cd6e 1 parent 53a8023
authored July 17, 2011
6  js/jquery.mobile.init.js
@@ -73,6 +73,12 @@
73 73
 		initializePage: function(){
74 74
 			//find present pages
75 75
 			var $pages = $( ":jqmData(role='page')" );
  76
+			
  77
+			//if no pages are found, create one with body's inner html
  78
+			if( !$pages.length ){
  79
+				$pages = $( "body" ).wrapInner( "<div data-" + $.mobile.ns + "role='page'></div>" ).children( 0 );
  80
+				console.log("page wasn't needed")
  81
+			}
76 82
 
77 83
 			//add dialogs, set data-url attrs
78 84
 			$pages.add( ":jqmData(role='dialog')" ).each(function(){
8  js/jquery.mobile.navigation.js
@@ -648,6 +648,9 @@
648 648
 							&& RegExp.$1 ) {
649 649
 						url = fileUrl = path.getFilePath( RegExp.$1 );
650 650
 					}
  651
+					else{
  652
+						
  653
+					}
651 654
 
652 655
 					if ( base ) {
653 656
 						base.set( fileUrl );
@@ -656,6 +659,11 @@
656 659
 					//workaround to allow scripts to execute when included in page divs
657 660
 					all.get( 0 ).innerHTML = html;
658 661
 					page = all.find( ":jqmData(role='page'), :jqmData(role='dialog')" ).first();
  662
+					
  663
+					//if page elem couldn't be found, create one and insert the body element's contents
  664
+					if( !page.length ){
  665
+						page = $( "<div data-" + $.mobile.ns + "role='page'>" + html.split( /<\/?body[^>]*>/gmi )[1] + "</div>" );
  666
+					}
659 667
 
660 668
 					if ( newPageTitle && !page.jqmData( "title" ) ) {
661 669
 						page.jqmData( "title", newPageTitle );
22  tests/unit/init/init_core.js
@@ -212,5 +212,27 @@
212 212
 			}, 500);
213 213
 		});
214 214
 		
  215
+		asyncTest( "page element is generated when not present in initial markup", function(){
  216
+			expect( 1 );
  217
+			
  218
+			$("<iframe src='nopage.html'>").appendTo("body").load(function(){
  219
+				ok( $(this).contents().find( ".ui-page" ).length, 1 );
  220
+				$(this).remove();
  221
+				start();
  222
+			});
  223
+		});
  224
+		
  225
+		asyncTest( "page element is generated when not present in ajax'd markup", function(){
  226
+			expect( 1 );
  227
+			$.mobile.changePage( "nopage.html" );
  228
+			
  229
+			$( ":jqmData(url$='nopage.html')" ).live( "pagecreate", function(){
  230
+					ok(true, "page was created from dynamically loaded HTML that contained no page div" );
  231
+					start();
  232
+			} );
  233
+		});
  234
+		
  235
+		
  236
+		
215 237
 	});
216 238
 })(jQuery);
15  tests/unit/init/nopage.html
... ...
@@ -0,0 +1,15 @@
  1
+<!DOCTYPE html>
  2
+<html lang="en">
  3
+<head>
  4
+	<meta charset="UTF-8" />
  5
+	<title>jQuery Mobile Init Test Suite</title>
  6
+	<script src="../../../js/jquery.js"></script>
  7
+	<script src="../jquery.setNameSpace.js"></script>
  8
+	<script src="../../../js/"></script>
  9
+	
  10
+</head>
  11
+
  12
+<p>testing</p>
  13
+
  14
+</body>
  15
+</html>

0 notes on commit 259815d

Please sign in to comment.
Something went wrong with that request. Please try again.