Twitter: raymondcamden


Address: Lafayette, LA, USA

Getting URL parameters in a jQuery Mobile page

02-24-2012 42,423 views Mobile, Development, jQuery 27 Comments

While I could have sworn I blogged this before (in fact, Chrome popped autosuggested the title), I can't find the post and as I ran into this issue again today, I figured I'd better blog it before I forget again. So - the question is simple. Given that you can use the powerful jQuery Mobile framework to create dynamic applications, how can you create single pages that act differently depending on the URL parameters sent to them. So for example, you may have a list of art pieces that all link to artdisplay.html. You want to pass an art ID value in the URL so your location may look like so:

artdisplay.html?id=2

You can bind to the "pageshow" event easily enough and then fetch the URL parameter, but here is where things get tricky. Or at least they did for me. I was making use of window.location.href like so:

view plain print about
1$("#artdetailpage").live("pageshow", function(e) {
2 var query = window.location.search;
3 query = query.replace("?id=","");
4 //query is now an ID, do stuff with it...
5});

window.location.search returns just the query string portion of the URL. If I only have one parameter, then I can simply strip it out. (Note that it also returns the ?, which seems silly.)

This worked fine until I put the code onto a device via PhoneGap. All of a sudden window.location.search was empty. Given than this was a slightly different way of running the application versus just hitting in my browser, I searched for another solution.

Turns out that jQuery Mobile stores the URL of the page in a data-page parameter. This is documented here. If you switch to using $(this).data("url"), you will get the full URL, which means slightly more string parsing, but it seems to work in every situation, desktop or mobile. The pseudo-code above could then look like so:

view plain print about
1$("#artdetailpage").live("pageshow", function(e) {
2 var query = $(this).data("url").split("?")[1];;
3 query = query.replace("id=","");
4 //query is now an ID, do stuff with it...
5});

27 Comments

  • Mikel #
    Commented on 02-24-2012 at 3:28 PM
    This is a very handy tip! I figured out how to do this by picking apart your Simple Notes application. Actually, I've learned a whole lot of stuff from that app (not just this technique)!

    Cheers and Happy Friday!
  • Commented on 02-24-2012 at 3:30 PM
    Yeah, I kinda figured this is something I've forgot/remembered multiple times. I'm hoping this blog entry helps it stick in my head.
  • Rachel #
    Commented on 05-02-2012 at 8:12 AM
    Hey Ray, curious - have you tried Chris Coenraets getURLVars function (http://coenraets.org/blog/2011/10/sample-applicati...)? He states in the article it works for him in PhoneGap but many have only been able to recreate it in a browser. Once in PhoneGap - nothing. I assume the cause of failure is the reason you mention in this article - I'll be trying out getting the param through the page URL from now on! Thanks!
  • Commented on 05-02-2012 at 8:39 AM
    Nope, haven't tried it. Looks similar to code I had tried (and saw fail) too.
  • Kalle #
    Commented on 06-07-2012 at 12:43 PM
    Tested your script, and it works when I call a page with a link. But when I refresh the page, I get the following error:

    Uncaught TypeError: Cannot call method 'replace' of undefined

    I guess this is right and I don't understand whats happening, so maybe you can help my little brain. ;)
  • Commented on 06-07-2012 at 1:22 PM
    Ah, I originally did this for a PhoneGap app, where you can't just refresh it. You would need to switch to the first block in that case (first demo). You could write code that checks first for $(this).data('url'), and if blank, then checks window.location.search.
  • Kyle Dodge #
    Commented on 06-19-2012 at 11:40 AM
    I've been having issues with Android 3 and 4 giving a "Error Loading Page" message. Android 2.x works great, searching I came across a recent git pull request that solves this issue https://github.com/apache/incubator-cordova-androi... Hopefully Cordova 1.9 incorporates these changes, but just in case your readers have the same issues when trying to pass url params in Android 3/4
  • Commented on 08-09-2012 at 10:40 AM
    Kyle - I just ran into this. I spent hours trying to figure it out. This is SO disappointing. I noticed the Pull request is still open, but, it also says it strips them out. Doesn't that imply it "fixes" it by removing them which means if you rely on them you are screwed?

    For now I'm switching to LocalStorage. I'll be blogging this too to help spread the word.
  • Kyle Dodge #
    Commented on 08-09-2012 at 11:43 AM
    Ray,
    Switching to this build of the cordova library in my application solved the issue. There was nothing I needed to do but to change the library, and everything on Android 3 & 4 worked perfectly on my app. Due to the time crunch I was under, I wound up just using this build but I really hope that they fix this in the next version of cordova, or I will be looking at switching to local storage as well.
  • Commented on 08-09-2012 at 11:46 AM
    So to be clear, it let you still get the values you had passed?
  • Kyle Dodge #
    Commented on 08-09-2012 at 1:28 PM
    Yep, I get the values exactly the same way that I do on Android 2.x and didn't have to change any of my javascript or html... the bug issue disappeared with that unofficial cordova build. You can test it by just changing out your cordova jar and cordova.js file, and you should see the bug disappear.
  • Commented on 08-09-2012 at 2:09 PM
    Simon MacDonald says this is checked into PG2.

    http://www.raymondcamden.com/index.cfm/2012/8/9/Cr...
  • Commented on 08-21-2012 at 10:44 AM
    Hi Raymond! Just stumbled across your blog. Very good content.Cant wait to read some more.

    One question: how can you use the $(this).data("url") method for parsing multiple search queries on one url? For example, page.html?category=12&id=2234
  • Commented on 08-21-2012 at 10:51 AM
    The result of the data call should give you the entire string

    category=12&id=2234

    You would then use JavaScript string functions to parse it.

    So if you know that's your URL 'form' (ie, what it will look like) you could just do

    var s = $(this).data("url");
    var categoryPart = s.split("&")[0];
    var idPart = s.split("&")[1];
    var category = categoryPart.split("=")[1];
    var id = idPart.split("=")[1];

    You could also write a simple utility function to split things and return a hash of name/value pairs.
  • Commented on 10-07-2012 at 9:55 PM
    Wow, thank you Raymond. I spent the past few hours trying to figure out what was wrong with the jqm.page.params plugin and trying to get the query string somehow. Very nice tip!
  • Commented on 10-07-2012 at 9:59 PM
    Glad to help.
  • shukri #
    Commented on 10-14-2012 at 8:02 AM
    Thanks so much! Excellent tip, so small and simple yet solves so many problems.
  • Tom #
    Commented on 02-21-2013 at 11:23 AM
    This just rescued me from hours of aggravation.
  • Rachel #
    Commented on 02-06-2014 at 9:05 PM
    Resurrecting an old topic, this was fixed in PG2 but am now having issues in Cordova 3 - have you played around with it by chance?
  • Commented on 02-07-2014 at 9:29 AM
    No - what issues are you having?
  • Rachel #
    Commented on 02-07-2014 at 10:25 AM
    Looks like "Error Loading Page" and "Unknown Chromium Error: 0" arise. It is similar to when it stopped working before the 2.0 update. Didn't know if you had confirmed this and/or if you had another suggestion.
  • Commented on 02-07-2014 at 1:27 PM
    If you try it in the Android browser (no PG involved) do you see the same?
  • Cameron Askew #
    Commented on 04-03-2014 at 4:02 PM
    I created a plug-in for jQuery Mobile 1.4+ which allows you to use URL parameters. The parameters are maintained within the URL meaning that page refreshes/going directly to a page will all work. It's on MIT license so use as you please.

    https://github.com/CameronAskew/jquery.mobile.para...
  • Shiplu Khan #
    Commented on 07-12-2014 at 2:13 AM
    @Raymond Camden can u please tell me about the #artdetailpage in the code sample. May be a silly one but....................
  • Commented on 07-12-2014 at 8:17 AM
    Tell you what?
  • Betty Heim #
    Commented on 08-06-2014 at 4:27 PM
    Thank you for this post. Can you tell me how to split the url for multiple parameters?
  • Betty Heim #
    Commented on 08-06-2014 at 4:30 PM
    I am sorry, I didn't see that you already posted an answer for this. Thank you.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty