jQuery Mobile and "query parameters" for hashbang navigation

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?

Nubia

I know this is a super old question but if you're still struggling with this, I created a plug-in which may help. – Menhir

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

Outfit

Looks like I had to patch jQuery Mobile (beta 1) a bit first. It's automatic changePage() logic on window load does not understand ? in hash. Here is my ad hoc patch: pastie.org/2184681 Should I report this as a bug? – Nubia

Yes, it still seems to be a bug in jqm 1.2 – Shenyang

@DotNetWise Here's what I found: jqm 1.2.1: OK, if you use jQuery 1.7.2; broken, if you use jQuery 1.8.3 (an invalid selector is passed to jQuery). jqm 1.3.1: broken, irrespective of the jQuery version used (the query string is quietly dropped). – Trapes

@Trapes - your comment save me a lot of time! Here is the bug report: github.com/jquery/jquery-mobile/issues/6216 – Irretrievable

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
}

Cetane

I especially want to use hashbangs, as I want to make links copy-pasteable. Thank you for you opinion in any cse. – Nubia

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

Dab