first pass at supporting query params in the hash Fixes #5085

This commit strips any query string from the hash when referencing an internal page. This allows users to reference exising pages but communicate information to parts of their application and allows users to use a singple page to do different things with the page event bindings to do so. The information about the url is preserved under the data.options object provided to the page lifecycle events as data.options.target which will contain the original url.
jquery-archive · Oct 12, 2012 · 824261b · 824261b
1 parent c7e87d4
commit 824261b
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 8 deletions.
diff --git a/js/jquery.mobile.init.js b/js/jquery.mobile.init.js
@@ -44,8 +44,9 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.support", "./jquery
 		// find and enhance the pages in the dom and transition to the first page.
 		initializePage: function() {
 			// find present pages
-			var $pages = $( ":jqmData(role='page'), :jqmData(role='dialog')" ),
-				hash = $.mobile.path.parseLocation().hash.replace("#", ""),
+			var path = $.mobile.path,
+				$pages = $( ":jqmData(role='page'), :jqmData(role='dialog')" ),
+				hash = path.convertUrlToDataUrl( path.parseLocation().hash ),
 				hashPage = document.getElementById( hash );
 
 			// if no pages are found, create one with body's inner html

diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js
@@ -188,8 +188,11 @@ define( [
 				var u = path.parseUrl( absUrl );
 				if ( path.isEmbeddedPage( u ) ) {
 					// For embedded pages, remove the dialog hash key as in getFilePath(),
-					// otherwise the Data Url won't match the id of the embedded Page.
-					return u.hash.split( dialogHashKey )[0].replace( /^#/, "" );
+					// and remove otherwise the Data Url won't match the id of the embedded Page.
+					return u.hash
+						.split( dialogHashKey )[0]
+						.replace( /^#/, "" )
+						.replace( /\?.*$/, "" );
 				} else if ( path.isSameDomain( u, documentBase ) ) {
 					return u.hrefNoHash.replace( documentBase.domain, "" ).split( dialogHashKey )[0];
 				}
@@ -1008,6 +1011,12 @@ define( [
 		// to the promise object it returns so we know when
 		// it is done loading or if an error ocurred.
 		if ( typeof toPage === "string" ) {
+			// preserve the original target as the dataUrl value will be simplified
+			// eg, removing ui-state, and removing query params from the hash
+			// this is so that users who want to use query params have access to them
+			// in the event bindings for the page life cycle See issue #5085
+			settings.target = toPage;
+
 			$.mobile.loadPage( toPage, settings )
 				.done(function( url, options, newPage, dupCachedPage ) {
 					isPageTransitioning = false;

diff --git a/tests/jquery.testHelper.js b/tests/jquery.testHelper.js
@@ -55,7 +55,7 @@
 			}
 		},
 
-		pushStateRedirect: function( filename ) {
+		redirect: function( filename, paramPairs ) {
 			var search, pairs = [];
 
 			search = location.search.replace( "?", "");
@@ -64,11 +64,15 @@
 				pairs = search.split( "&" );
 			}
 
-			pairs.push( "push-state=false" );
+			pairs = pairs.concat( paramPairs ? paramPairs : [] );
 
 			location.href = location.href.toString()
-				 .replace(/\/[^\/]*\?|\/[^\/]*$/, "/" + filename )
-				 .replace( search, "") + "?" + pairs.join( "&" );
+				.replace(/\/[^\/]*\?|\/[^\/]*$/, "/" + filename )
+				.replace( search, "") + (pairs.length ? "?" + pairs.join( "&" ) : "");
+		},
+
+		pushStateRedirect: function( filename ) {
+			this.redirect( filename, ["push-state=false"] );
 		},
 
 		reloads: {},

diff --git a/tests/unit/navigation/index.html b/tests/unit/navigation/index.html
@@ -16,6 +16,8 @@
 	<link rel="stylesheet" href="../../../external/qunit.css"/>
 	<script src="../../../external/qunit.js"></script>
 
+	<script type="text/javascript" src="navigation_helpers.js"></script>
+	<script type="text/javascript" src="navigation_core.js"></script>
 	<script type="text/javascript" src="navigation_paths.js"></script>
 	<script src="../swarminject.js"></script>
 </head>

diff --git a/tests/unit/navigation/init-query-param-hash-tests.html b/tests/unit/navigation/init-query-param-hash-tests.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <!-- forces the base-tests into a push state disabled run and allows for
+       the test suite runner to pick it up as a seperate test set. See test/unit/ls.php,
+       test/unit/runner.js, base-tests.html, and tests/jquery.testHelper.js for more. -->
+	<script src="../../../js/jquery.js"></script>
+	<script src="../../jquery.testHelper.js"></script>
+	<script type="text/javascript">
+		$.testHelper.redirect( "init-tests/query-param-hash.html#loaded?test-query-param-hash=true" );
+	</script>
+</head>
+<body>
+</body>
+</html>
diff --git a/tests/unit/navigation/init-tests/navigation_query_param_hash.js b/tests/unit/navigation/init-tests/navigation_query_param_hash.js
@@ -0,0 +1,9 @@
+(function( $ ) {
+	module( "initial page loading tests" );
+
+	test( "loading a url that refs an embedded page with a query param works", function() {
+		ok( location.href.indexOf( "?test-query-param-hash=true" ) >= -1, "query param present in url" );
+		ok( location.hash.indexOf( "loaded" ) >= -1, "the hash is targeted at the page to be loaded" );
+		ok( $.mobile.activePage.attr( "id" ), "loaded", "the correct page is loaded" );
+	});
+})( jQuery );
diff --git a/tests/unit/navigation/init-tests/query-param-hash.html b/tests/unit/navigation/init-tests/query-param-hash.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Navigation Test Suite</title>
+
+	<script src="../../../../js/jquery.tag.inserter.js"></script>
+	<script src="../../jquery.setNameSpace.js"></script>
+	<script src="../../../../tests/jquery.testHelper.js"></script>
+	<script src="../../../../js/"></script>
+	<script type="text/javascript">
+		$.testHelper.setPushState();
+	</script>
+	<link rel="stylesheet"	href="../../../../css/themes/default/jquery.mobile.css"/>
+	<link rel="stylesheet" href="../../../../external/qunit.css"/>
+	<script src="../../../../external/qunit.js"></script>
+	<script src="../../swarminject.js"></script>
+  <script type="text/javascript" src="navigation_query_param_hash.js"></script>
+</head>
+<body>
+  <div id="qunit"></div>
+
+  <!-- default page is not the targeted page -->
+  <div id="default" data-nstest-role="page">
+  </div>
+
+  <div id="loaded" data-nstest-role="page">
+  </div>
+</body>
+</html>
diff --git a/tests/unit/navigation/navigation_core.js b/tests/unit/navigation/navigation_core.js
@@ -1298,4 +1298,18 @@
 			}
 		]);
 	});
+
+	asyncTest( "loading an embeded page with query params works", function() {
+		$.testHelper.pageSequence([
+			function() {
+				$.mobile.changePage( "#bar?baz=bak", { dataUrl: false } );
+			},
+
+			function() {
+				ok( location.hash.indexOf( "bar?baz=bak" ) >= -1, "the hash is targeted at the page to be loaded" );
+				ok( $.mobile.activePage.attr( "id" ), "bar", "the correct page is loaded" );
+				start();
+			}
+		]);
+	});
 })(jQuery);