jQuery Mobile and “query parameters” for hashbang

Question

I am using jQuery Mobile and have few pages in one HTML page. When opening these pages, I'd like to pass parameters for them, so that their parameters are persistent in URL.

E.g.

  <a href="#map?x=4&y=2"

It would open and I could access parameters X and Y in beforeshow event.

Is this possible and how? What alternative means you suggest for encoding parameters with hashbangs?

Answer 1

Yes, you can have links like the one you showed:

<a href="#map?x=4&y=2"> Click here </a>

Then, on before show you can read this params with this code:

var params = QueryStringToHash(location.hash.substr(1));
//Now you can use params.x, params.y, etc

The definition of the QueryStringToHash (got from here) is the following:

var QueryStringToHash = function QueryStringToHash  (query) {
  var query_string = {};
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    pair[0] = decodeURIComponent(pair[0]);
    pair[1] = decodeURIComponent(pair[1]);
        // If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
        // If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
        // If third or later entry with this name
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  } 
  return query_string;
};

Hope this helps. Cheers

Answer 2

I would suggest you don't use hash 'parameters', since current support for it is buggy.

I would intercept the clicks on all links and look for a specific data- element, say, data-params:

    $('a').live('click',
        function(e) {
            var data = $(e.target).jqmData()
            globalParams = data.params !== null ? data.params : null
        }
    )

And in your HTML you can go

<a href="#map" data-params="x=4&y=2">....</a>

In this case you are creating a global variable, called params, which you should be able to access in a uniform manner from all your code.

You will have to parse those parameters yourself though, however that's not hard, could use something like this:

function getCurrentParams() {

    if (!params) {
        return null
    }

    var res = {}
    $(params.split('&')).each(
        function(i, e) {
            var pair = e.split('=')
            if (pair.length !== 2) {
                return
            }
            res[pair[0]] = pair[1]
        }
    )

    return res
}

Answer 3

Have you checked out the jQuery mobile FAQ? -> http://jquerymobile.com/test/docs/faq/pass-query-params-to-page.php

I'm currently using: https://github.com/azicchetti/jquerymobile-router