Passing parameters to a page-id in jQuery Mobile

Question

I'm trying to pass some parameters to a page-id made in jQuery Mobile.

The site is composed of list-views with links, each of them has the hash coded in it, like this:

<li><a href="#pronostico?region=12&ciudad=0">Puerto Natales</a></li>

I have binded pagebeforechange to catch hashes in the URL, do parameter detection and take action depending on the amount of parameters passed.

Now, with cookies, I've been trying this:

$(document).one("pageinit", function(event, data) {
  if (location.hash.search(/^(#ciudades|#pronostico)/) === -1) {
    if ($.cookie("recordar")) {
      $.mobile.changePage($("#pronostico"), {
        data: "region=" + $.cookie("region") + "&ciudad=" + $.cookie("ciudad")
      });
    }
  }
});

But it just passes me to the #pronostico page-id, with no parameters in the hash. As a result, I get a page without the information it is supposed to show.

Thanks in advance.

Answer 1

Yes, parameters on the hash are not supported by default. I've been using the following plugin to give me that, and it's been working pretty good so far ;-)

jqm.page.params

UPDATE - HOW TO USE:

I've added the following code after including jqm.page.params.js:

$(document).bind("pagebeforechange", function( event, data ) {
    $.mobile.pageData = (data && data.options && data.options.pageData)
        ? data.options.pageData
        : null;
});

So for example, a page getting called like: index.html#search?id=mysearchkeyword Can now access this information in ANY page event I feel like:

$(document).on("pagebeforeshow", "#firstpage", function(e, data){ 
? ? ? ? if ($.mobile.pageData && $.mobile.pageData.id){
? ? ? ? ? ? console.log("Parameter id=" + $.mobile.pageData.id);
? ? ? ? }
?});

Would print "mysearchkeyword" to your logging console.

Hope this helps!

PS: Note that I am no way affiliated with the plugin or it's author

Editors Note: The author had this as second code block. In Jquery 1.9, live is removed so i updated his sample above with a .on syntax instead. Here is the original:

$("#firstpage").live("pagebeforeshow", function(e, data){
    if ($.mobile.pageData && $.mobile.pageData.id){
        console.log("Parameter id=" + $.mobile.pageData.id);
    }
});