From e736caebfe28fa8b0c3541ba678cbfe5d7968cab Mon Sep 17 00:00:00 2001 From: scottjehl Date: Sat, 23 Oct 2010 17:24:06 -0400 Subject: [PATCH] Removed the ajaxClick function and moved its logic into the live click event handler, where it is now refactored and simplified. Thx to Jeffrey Way for ideas that went into this refactor. Also, clicks that are triggered on anchors will now be able to make a new http request, which improves listview behavior when clicking LIs that resolve to external urls. Included in commit is a new demo/test page with various link types to make sure they behave as expected. Fixes #272, Fixes #264 --- docs/pages/docs-link-scenarios.html | 40 +++++++++++++++++ js/jquery.mobile.js | 66 +++++++++++++---------------- 2 files changed, 69 insertions(+), 37 deletions(-) create mode 100755 docs/pages/docs-link-scenarios.html diff --git a/docs/pages/docs-link-scenarios.html b/docs/pages/docs-link-scenarios.html new file mode 100755 index 00000000..45e843f7 --- /dev/null +++ b/docs/pages/docs-link-scenarios.html @@ -0,0 +1,40 @@ + + + + jQuery Mobile Docs - Pages + + + + + +
+ +
+

Linking pages

+
+ +
+ +

jQuery Mobile is designed to work with simple page linking conventions. The following list demonstrates how different types of links will be handled, either remotely or through an Ajax Request.

+ + + +
+
+ + + diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js index fc835127..bb7a2e48 100644 --- a/js/jquery.mobile.js +++ b/js/jquery.mobile.js @@ -104,47 +104,39 @@ $('#ui-base').attr('href', baseUrl); } - - // send a link through hash tracking - jQuery.fn.ajaxClick = function() { - var href = jQuery( this ).attr( "href" ); - pageTransition = jQuery( this ).data( "transition" ) || "slide"; - forceBack = jQuery( this ).data( "back" ) || undefined; - nextPageRole = jQuery( this ).attr( "data-rel" ); - - //find new base for url building - var newBaseURL = getBaseURL(); - - //if href is absolute but local, or a local ID, no base needed - if( /^\//.test(href) || (/https?:\/\//.test(href) && !!(href).match(location.hostname)) || /^#/.test(href) ){ - newBaseURL = ''; + //click routing - direct to HTTP or Ajax, accordingly + jQuery( "a" ).live( "click", function(event) { + var $this = $(this), + //get href, remove same-domain protocol and host + href = $this.attr( "href" ).replace( location.protocol + "//" + location.host, ""), + //if it still starts with a protocol, it's external, or could be :mailto, etc + external = /^\w+:|#/.test( href ) || $this.is( "[target],[rel=external]" ), + nullLink = href == '#'; + + if( nullLink ){ + //for links created purely for interaction - ignore + return false; } - - // set href to relative path using baseURL and - if( !/https?:\/\//.test(href) ){ - href = newBaseURL + href; + else if( external ){ + //deliberately redirect, in case click was triggered + location.href = href; } - - //if it's a non-local-anchor and Ajax is not supported, or if it's an external link, go to page without ajax - if ( ( /^[^#]/.test(href) && !jQuery.support.ajax ) || ( /https?:\/\//.test(href) && !!!href.match(location.hostname) ) ) { - location = href - } - else{ - if( $(this).is(unHashedSelectors) ){ - changePage(href, pageTransition, undefined); - } - else{ - changePage(href, pageTransition, undefined, true); + else { + //use ajax + var pageTransition = $this.data( "transition" ) || "slide", + forceBack = $this.data( "back" ) || undefined, + changeHashOnSuccess = !$(this).is(unHashedSelectors); + + nextPageRole = $this.attr( "data-rel" ); + + //if it's a relative href, prefix href with base url + if( href.indexOf('/') !== 0 && href.indexOf('#') !== 0 ){ + href = getBaseURL() + href; } + changePage(href, pageTransition, forceBack, changeHashOnSuccess); } - return this; - }; - - // ajaxify all navigable links - jQuery( "a:not([href='#']):not([target]):not([rel='external']):not([href^='mailto:'])" ).live( "click", function(event) { - jQuery( this ).ajaxClick(); - return false; + event.preventDefault(); }); // turn on/off page loading message. @@ -199,7 +191,7 @@ from = toIsArray ? to[0] : $.activePage, to = toIsArray ? to[1] : to, url = fileUrl = $.type(to) === "string" ? to.replace( /^#/, "" ) : null, - back = (back !== undefined) ? back : (forceBack || ( urlStack.length > 1 && urlStack[ urlStack.length - 2 ].url === url )), + back = (back !== undefined) ? back : ( urlStack.length > 1 && urlStack[ urlStack.length - 2 ].url === url ), transition = (transition !== undefined) ? transition : ( pageTransition || "slide" ); //unset pageTransition, forceBack