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?

Answer 1

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
}