17

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.

noquierouser
  • 963
  • 2
  • 11
  • 25

3 Answers3

31

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);
    }
});
blak3r
  • 16,066
  • 16
  • 78
  • 98
Leon
  • 4,532
  • 1
  • 19
  • 24
  • This seems useful, and I think I'll need your samples to know how does this work. Should I need to change the `pagebeforechange` that I have implemented in my site when using this plugin? – noquierouser Nov 29 '11 at 14:31
  • my sample code added as an update above, pls mark as answer if this works out for you! Thanks – Leon Nov 30 '11 at 09:56
  • I had a similar problem and found this answer very helpful. http://stackoverflow.com/questions/10354455/jquery-mobile-url-parameter-not-updating-in-browser-but-getting-correct-one-wit – Travis Nelson Jul 06 '12 at 21:36
  • 1
    does this jqm params support passing parameters between single template pages? – Rodrigo Dias Jan 14 '13 at 16:55
  • I would also love to know if this plugin supports passing params between single page templates (I cant get it to work). – Jimothey Feb 14 '13 at 09:58
  • 2
    This plugin is broken with jQuery Mobile 1.3, and the author hasn't been active on GitHub for over a year. – Jacob Marble Mar 08 '13 at 07:49
  • Jacob is right, I was driving mad since I read his comment and realize that the plugin can't be used with jQM 1.3: query string is not retained in the url and the page is un-bookmarkable @Leon: please, have you idea how the plugin can be enhanced to work with jQM 1.3? – Ivan Mar 17 '13 at 16:47
  • Thanks! It works for me with jqm 1.3.1 but it's true that the query string is not retained in the url – Sergio Morstabilini Jun 11 '13 at 14:25
  • I edited the answer to be compatible with jQuery 1.9. live() was removed. – blak3r Jul 14 '13 at 20:15
  • @Jacob I've created a plug-in under the MIT license which is compatible with jQuery Mobile 1.4+. You can find it [here on GitHub](https://github.com/CameronAskew/jquery.mobile.paramsHandler). – Cameron Askew Mar 27 '14 at 21:45
  • @SergioMorstabilini the plug-in mentioned in my previous comment maintains the URL – Cameron Askew Mar 27 '14 at 21:46
  • @Ivan If you're still looking for something to use with jQM, I recently created a plug-in for jQM 1.4, please see 2 comments ago. – Cameron Askew Mar 27 '14 at 21:47
  • @PriyaKathir Please see my previous comments :). Hopefully the library works for at least one of you guys..if not, let me know..and feel free to contribute if you like. – Cameron Askew Mar 27 '14 at 21:48
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);
    }
});
stevec
  • 71
  • 4
0

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

Adrian Laurenzi
  • 286
  • 1
  • 6