This recipe shows you how to use the utility methods provided by the $.mobile.path object in your app.
Copy the full code of this recipe from the code/09/path source folder. You can launch this code by using the URL: http://localhost:8080/09/path/main.html.
- Create the
main.htmlpage with four anchor links, as shown in the following code snippet:<div data-role="content"> <div id="msgdiv"></div> <a href="http://localhost:8080/09/base/main.html" data-role="button"> 1: http://localhost:8080/09/base/main.html </a> <a href="http://localhost:8080/09/base/" data- role="button"> 2: http://localhost:8080/09/base/ </a> <a href="page1.html" data-role="button"> 3: page1.html </a> <a href="../" data-role="button">4: ../</a> </div> - Add the following script to the
<head>section to get the URL of the link clicked.$("#main").live("pageinit", function(event) { var docurl = $.mobile.getDocumentUrl(); $("a").bind("click", function(event, ui) { dispPath($(this).attr("href")); event.preventDefault(); event.stopPropagation(); }); - Add the
disppath()function to display the output of the$.mobile.pathutility methods:function dispPath(urlstr) { var urlcomp = $.mobile.path.parseUrl(urlstr); var str = "<p>Base: " + docurl + "</p>" + "<p>Page: " + urlcomp.href + "</p>" + "<p>Same Domain: " + $.mobile.path.isSameDomain( docurl, urlcomp) + "</p>" + "<p>is Absolute: " + $.mobile.path.isAbsoluteUrl(urlcomp) + "</p>" + "<p>is Relative: " + $.mobile.path.isRelativeUrl(urlcomp) + "</p>"; if ($.mobile.path.isRelativeUrl(urlcomp)) { str += "<p>Make Absolute Path: " + $.mobile.path.makePathAbsolute(urlcomp.href, $.mobile.path.parseUrl(docurl).pathname) + "</p>" + "<p>Make Absolute Url: " + $.mobile.path.makeUrlAbsolute(urlcomp.href, docurl) + "</p>" } $("#msgdiv").html(str); } });
Add an empty div tag with id="msgdiv" to main.html. Add four links with different URLs, as shown in the code. Add script to the <head> section to obtain the original document URL (#docurl) of the page using the $.mobile.getDocumentUrl() method in the pageinit event handler. Use this URL as the reference point for comparison in this recipe.
Next, add an event handler for the click event of the four anchor links. Invoke the dispPath() function, and pass it the link href attribute as the parameter. You can obtain the href attribute by calling the jQuery attr("href") method on the anchor object. Also call the event.preventDefault()
and event.stopPropagation() methods in this event handler to prevent any further action on the click event.
In the dispPath function, call the $.mobile.path.parseUrl method to obtain the href component of the URL passed in. Now, invoke the various $.mobile.path utility methods, and display their outputs in the #msgdiv div container, as shown in the code. Call the isRelativeUrl() method to check if the URL passed in is relative. Convert it to an absolute value using the
makePathAbsolute() and makeUrlAbsolute() methods. The original document URL is used as reference for these conversions.
When the page loads, you will see four link buttons. Click on the first link http://localhost:8080/09/path/main.html, and an output similar to the following screenshot will be shown. The URL is in the same domain as the reference URL, and the URL is also absolute.
The second link, http://localhost:8080/09/base/, points to a folder. The following output is seen; the domain is same and the URL is absolute:
The third link, page1.html, is a relative URL. The absolute path and the absolute URL are computed using the reference URL and displayed, as shown in the following screenshot; the Same Domain value is false here.
The final link points to the parent directory, ../, and is again a relative URL. The absolute path and URL is computed using the reference URL, and is displayed as shown in the following screenshot; the Same Domain value is false again:
The $.mobile.path utility methods used in this recipe are as follows:
isAbsoluteUrl: Checks if a given URL is absoluteisRelativeUrl: Checks if a given URL is relativemakePathAbsolute: Converts a relative path to absolute; the method uses a reference path argument for the conversionmakeUrlAbsolute: Converts a relative URL to absolute; the method uses a reference URL argument for the conversionisSameDomain: Checks if two URLs belong to the same domain