CODEWITHSUNDEEP
jquerynavigationjquery-mobilehashbang
Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83586

jQuery Mobile and "query parameters" for hashbang navigation

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?

Upvotes: 11

Views: 6088

Answers (3)

Irwin
Irwin

Reputation: 12829

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

Upvotes: 0

Art
Art

Reputation: 24597

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
}

Upvotes: 7

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18354

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

Upvotes: 4

Related Questions