Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 824261b

Browse files
johnbenderjohnbender
committed
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.
1 parent c7e87d4 commit 824261b

File tree

8 files changed

+93
-8
lines changed

8 files changed

+93
-8
lines changed

‎js/jquery.mobile.init.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,9 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.support", "./jquery
4444
// find and enhance the pages in the dom and transition to the first page.
4545
initializePage: function() {
4646
// find present pages
47-
var $pages = $( ":jqmData(role='page'), :jqmData(role='dialog')" ),
48-
hash = $.mobile.path.parseLocation().hash.replace("#", ""),
47+
var path = $.mobile.path,
48+
$pages = $( ":jqmData(role='page'), :jqmData(role='dialog')" ),
49+
hash = path.convertUrlToDataUrl( path.parseLocation().hash ),
4950
hashPage = document.getElementById( hash );
5051

5152
// if no pages are found, create one with body's inner html

‎js/jquery.mobile.navigation.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -188,8 +188,11 @@ define( [
188188
var u = path.parseUrl( absUrl );
189189
if ( path.isEmbeddedPage( u ) ) {
190190
// For embedded pages, remove the dialog hash key as in getFilePath(),
191-
// otherwise the Data Url won't match the id of the embedded Page.
192-
return u.hash.split( dialogHashKey )[0].replace( /^#/, "" );
191+
// and remove otherwise the Data Url won't match the id of the embedded Page.
192+
return u.hash
193+
.split( dialogHashKey )[0]
194+
.replace( /^#/, "" )
195+
.replace( /\?.*$/, "" );
193196
} else if ( path.isSameDomain( u, documentBase ) ) {
194197
return u.hrefNoHash.replace( documentBase.domain, "" ).split( dialogHashKey )[0];
195198
}
@@ -1008,6 +1011,12 @@ define( [
10081011
// to the promise object it returns so we know when
10091012
// it is done loading or if an error ocurred.
10101013
if ( typeof toPage === "string" ) {
1014+
// preserve the original target as the dataUrl value will be simplified
1015+
// eg, removing ui-state, and removing query params from the hash
1016+
// this is so that users who want to use query params have access to them
1017+
// in the event bindings for the page life cycle See issue #5085
1018+
settings.target = toPage;
1019+
10111020
$.mobile.loadPage( toPage, settings )
10121021
.done(function( url, options, newPage, dupCachedPage ) {
10131022
isPageTransitioning = false;

‎tests/jquery.testHelper.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
}
5656
},
5757

58-
pushStateRedirect: function( filename ) {
58+
redirect: function( filename, paramPairs ) {
5959
var search, pairs = [];
6060

6161
search = location.search.replace( "?", "");
@@ -64,11 +64,15 @@
6464
pairs = search.split( "&" );
6565
}
6666

67-
pairs.push( "push-state=false" );
67+
pairs = pairs.concat( paramPairs ? paramPairs : [] );
6868

6969
location.href = location.href.toString()
70-
.replace(/\/[^\/]*\?|\/[^\/]*$/, "/" + filename )
71-
.replace( search, "") + "?" + pairs.join( "&" );
70+
.replace(/\/[^\/]*\?|\/[^\/]*$/, "/" + filename )
71+
.replace( search, "") + (pairs.length ? "?" + pairs.join( "&" ) : "");
72+
},
73+
74+
pushStateRedirect: function( filename ) {
75+
this.redirect( filename, ["push-state=false"] );
7276
},
7377

7478
reloads: {},

‎tests/unit/navigation/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
<link rel="stylesheet" href="../../../external/qunit.css"/>
1717
<script src="../../../external/qunit.js"></script>
1818

19+
<script type="text/javascript" src="navigation_helpers.js"></script>
20+
<script type="text/javascript" src="navigation_core.js"></script>
1921
<script type="text/javascript" src="navigation_paths.js"></script>
2022
<script src="../swarminject.js"></script>
2123
</head>

‎tests/unit/navigation/init-query-param-hash-tests.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<!-- forces the base-tests into a push state disabled run and allows for
5+
the test suite runner to pick it up as a seperate test set. See test/unit/ls.php,
6+
test/unit/runner.js, base-tests.html, and tests/jquery.testHelper.js for more. -->
7+
<script src="../../../js/jquery.js"></script>
8+
<script src="../../jquery.testHelper.js"></script>
9+
<script type="text/javascript">
10+
$.testHelper.redirect( "init-tests/query-param-hash.html#loaded?test-query-param-hash=true" );
11+
</script>
12+
</head>
13+
<body>
14+
</body>
15+
</html>

‎tests/unit/navigation/init-tests/navigation_query_param_hash.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
(function( $ ) {
2+
module( "initial page loading tests" );
3+
4+
test( "loading a url that refs an embedded page with a query param works", function() {
5+
ok( location.href.indexOf( "?test-query-param-hash=true" ) >= -1, "query param present in url" );
6+
ok( location.hash.indexOf( "loaded" ) >= -1, "the hash is targeted at the page to be loaded" );
7+
ok( $.mobile.activePage.attr( "id" ), "loaded", "the correct page is loaded" );
8+
});
9+
})( jQuery );

‎tests/unit/navigation/init-tests/query-param-hash.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Navigation Test Suite</title>
7+
8+
<script src="../../../../js/jquery.tag.inserter.js"></script>
9+
<script src="../../jquery.setNameSpace.js"></script>
10+
<script src="../../../../tests/jquery.testHelper.js"></script>
11+
<script src="../../../../js/"></script>
12+
<script type="text/javascript">
13+
$.testHelper.setPushState();
14+
</script>
15+
<link rel="stylesheet" href="../../../../css/themes/default/jquery.mobile.css"/>
16+
<link rel="stylesheet" href="../../../../external/qunit.css"/>
17+
<script src="../../../../external/qunit.js"></script>
18+
<script src="../../swarminject.js"></script>
19+
<script type="text/javascript" src="navigation_query_param_hash.js"></script>
20+
</head>
21+
<body>
22+
<div id="qunit"></div>
23+
24+
<!-- default page is not the targeted page -->
25+
<div id="default" data-nstest-role="page">
26+
</div>
27+
28+
<div id="loaded" data-nstest-role="page">
29+
</div>
30+
</body>
31+
</html>

‎tests/unit/navigation/navigation_core.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1298,4 +1298,18 @@
12981298
}
12991299
]);
13001300
});
1301+
1302+
asyncTest( "loading an embeded page with query params works", function() {
1303+
$.testHelper.pageSequence([
1304+
function() {
1305+
$.mobile.changePage( "#bar?baz=bak", { dataUrl: false } );
1306+
},
1307+
1308+
function() {
1309+
ok( location.hash.indexOf( "bar?baz=bak" ) >= -1, "the hash is targeted at the page to be loaded" );
1310+
ok( $.mobile.activePage.attr( "id" ), "bar", "the correct page is loaded" );
1311+
start();
1312+
}
1313+
]);
1314+
});
13011315
})(jQuery);

0 commit comments

Comments
 (0)