Passing parameters to a page-id in jQuery Mobile

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.

Solution 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);
    }
});

Solution 2:

The plugin doesn't support bookmarking, though. If you add a pagechange handler, you can fix that by putting the params back onto the url after jQM is done with it:

// list of inner pages where you want to support params AND bookmarking
// maybe better to use a CSS class name to mark them
var $paramPages;
$(document).ready(function() {
    $paramPages = $('#book, #order');
});

// put the params back into the location once jQM is done
//
$( document ).bind( "pagechange", function( e, data ) {
    if (data.toPage.is($paramPages) && data.absUrl) {
        window.location.replace(data.absUrl);
    }
});