Getting URL parameters in a jQuery Mobile page

This post is more than 2 years old.

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:



$("#artdetailpage").live("pageshow", function(e) {
  var query = window.location.search;
  query = query.replace("?id=","");
  //query is now an ID, do stuff with it...
});

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:


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

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Mikel posted on 2/25/2012 at 2:28 AM

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!

Comment 2 by Raymond Camden posted on 2/25/2012 at 2:30 AM

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.

Comment 3 by Rachel posted on 5/2/2012 at 5:12 PM

Hey Ray, curious - have you tried Chris Coenraets getURLVars function (http://coenraets.org/blog/2... 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!

Comment 4 by Raymond Camden posted on 5/2/2012 at 5:39 PM

Nope, haven't tried it. Looks similar to code I had tried (and saw fail) too.

Comment 5 by Kalle posted on 6/7/2012 at 9: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. ;)

Comment 6 by Raymond Camden posted on 6/7/2012 at 10: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.

Comment 7 by Kyle Dodge posted on 6/19/2012 at 8:40 PM

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/i... 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

Comment 8 by Raymond Camden posted on 8/9/2012 at 7:40 PM

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.

Comment 9 by Kyle Dodge posted on 8/9/2012 at 8:43 PM

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.

Comment 10 by Raymond Camden posted on 8/9/2012 at 8:46 PM

So to be clear, it let you still get the values you had passed?

Comment 11 by Kyle Dodge posted on 8/9/2012 at 10: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.

Comment 12 by Raymond Camden posted on 8/9/2012 at 11:09 PM

Simon MacDonald says this is checked into PG2.

http://www.raymondcamden.co...

Comment 13 by Brock Ellis posted on 8/21/2012 at 7:44 PM

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

Comment 14 by Raymond Camden posted on 8/21/2012 at 7:51 PM

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.

Comment 15 by Clement posted on 10/8/2012 at 6:55 AM

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!

Comment 16 by Raymond Camden posted on 10/8/2012 at 6:59 AM

Glad to help.

Comment 17 by shukri posted on 10/14/2012 at 5:02 PM

Thanks so much! Excellent tip, so small and simple yet solves so many problems.

Comment 18 by Tom posted on 2/21/2013 at 10:23 PM

This just rescued me from hours of aggravation.

Comment 19 by Rachel posted on 2/7/2014 at 8:05 AM

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?

Comment 20 by Raymond Camden posted on 2/7/2014 at 8:29 PM

No - what issues are you having?

Comment 21 by Rachel posted on 2/7/2014 at 9:25 PM

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.

Comment 22 by Raymond Camden posted on 2/8/2014 at 12:27 AM

If you try it in the Android browser (no PG involved) do you see the same?

Comment 23 by Cameron Askew posted on 4/4/2014 at 1:02 AM

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/CameronA...

Comment 24 by Shiplu Khan posted on 7/12/2014 at 11:13 AM

@Raymond Camden can u please tell me about the #artdetailpage in the code sample. May be a silly one but....................

Comment 25 by Raymond Camden posted on 7/12/2014 at 5:17 PM

Tell you what?

Comment 26 by Betty Heim posted on 8/7/2014 at 1:27 AM

Thank you for this post. Can you tell me how to split the url for multiple parameters?

Comment 27 by Betty Heim posted on 8/7/2014 at 1:30 AM

I am sorry, I didn't see that you already posted an answer for this. Thank you.