CODEWITHSUNDEEP
jqueryjquery-mobile
noquierouser
noquierouser

Reputation: 1003

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.

Upvotes: 17

Views: 14632

Answers (3)

Adrian Laurenzi
Adrian Laurenzi

Reputation: 286

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'.

Upvotes: 0

stevec
stevec

Reputation: 61

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

Upvotes: 2

Leon
Leon

Reputation: 4532

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

Upvotes: 31

Related Questions