JQuery Mobile - Can't get the parameters from the URL

Question

I've a list-view that I created dynamically and each list item is a link like this: index.html#ClubPage?id=X (where X is int).

I want to get the ID parameter before the page loads but it seems like the parameter vanish away.

$("#ClubPage").on("pagebeforeshow", function (event) {
    alert( $(this).data("url") );
    alert( window.location.href );
    alert( window.location.search );
});

With this code, the 1st alert returns "ClubPage", the 2nd returns localhost/#ClubPage and the 3rd returns blank string.

How can I get the ID parameter and its value? Nothing seems to work :-\\

Answer 1

Jquery mobile manipulates the url for single page templates. You will have to pass the parameter a different way.

An Example of how to do it:

<a href="#clubPage" param="3">Some Link</a>

You can do this multiple ways, but I've put the id value in the link under "param".

In the next section I am pulling the param out when they click and storing it in sessionStorage. Then redirecting to the correct page. Then grabbing the param "beforepageshow".

$('body').on('click','a[href="#clubPage"]',function(e){
    e.preventDefault();

    var param = $(this).attr('param');
    sessionStorage.setItem('clubPage_param', param);
    location.href = "index.html#ClubPage";
});

$("#ClubPage").on("pagebeforeshow", function (event) {

    var param = sessionStorage.getItem('clubPage_param');
    //now you have your item here
});

I'm sure there are multiple ways to do this, you can keep the link in the href and cut it up before you redirect to the new page. Or store the value in a javascript variable.

You can also make single pages and pass the param normally that way. Hope that helps.