How to get query params for internal page link in JQuery Mobile

Question

I'm looking for a clean way to do quite a trivial thing in JQuery Mobile.

When linking to an internal page to be loaded into the Dom, I want to read the query params.

So in the example below I want to access the id=test2 part of the url.

<div data-role="page" id="page1">
    <a href="#page2?id=test2">Go to page 2</a>
</div>  

<div data-role="page" id="page2">
    <a href="#page1?id=test1">Go back to page 1</a>
</div>

I use pagecontainerbeforeshow to perform code on loading the page like this, but I don't know how to get to the query params.

$(document).ready(function(){

    $( "body" ).on( "pagecontainerbeforeshow", function( event, ui ) {
        console.log("How to get the Query Params?");
    });

});

Here's a fiddle with this code: http://jsfiddle.net/wpgs06r1/6/

Answer 1

jQuery Mobile ignores (removes) querystring parameters in URL and shows URL with hash only. However, you can retrieve querystring only on pagecontainerbeforechange and when data.toPage is a string not an object. At this stage, full URL is stored in data.absUrl.

You may use $.mobile.path.parseUrl().search method to retrieve querystring, or you can use .split("?"), both should work properly.

$(document).on("pagecontainerbeforechange", function (e ,data) {
   if (typeof data.toPage == "string") {
      var url = $.mobile.path.parseUrl(data.absUrl),
          querystring = url.search; /* retruns ?id=test1 */

      /* or */

      var url = data.absUrl,
          querystring = url.split("?")[1]; /* retruns ?id=test1 */
   }
});

Edit: If querystring comes after hash, $.mobile.path.parseUrl(url).search will return no value as it considers it a hash. Hence, use second method .split("?").

---

Another possible way is to utilize pagecontainerbeforetransition as it fires once and returns data.toPage object and data.absUrl string.

Custom function to process URL and retrieve querystring

function getParam(url) {
    var parsed = $.mobile.path.parseUrl(url),
        hash = parsed.hash.split("?");
    return {
        search: hash[1].split("=")[1]
    };
}

Listen to pagecontainerbeforetransition; both .toPage and .absUrl should be defined and .toPage's ID is the page you want to utilize parameters at.

$(document).on("pagecontainerbeforetransition", function (e, data) {
    if ($.type(data.toPage) !== "undefined" && $.type(data.absUrl) !== "undefined" && data.toPage[0].id == "pageID") {
        var param = getParam(data.absUrl).search;
        $(".selector", data.toPage).text("Retrieved: " + param);
    }
});

Demo