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 th

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

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

Answer 3

It looks like one way to achieve passing URL parameters between pages is to use the hash processing approach in this example from the jQuery Mobile docs: http://demos.jquerymobile.com/1.4.1/navigation-hash-processing/

This solution seems ideal because, unlike other solutions, it updates the URL in the browser address bar to include the URL parameters upon changing between pages. This approach also eliminates the need for using any plugins such as 'jqm.page.params'.