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...
});
Archived Comments
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!
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.
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!
Nope, haven't tried it. Looks similar to code I had tried (and saw fail) too.
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. ;)
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.
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
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.
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.
So to be clear, it let you still get the values you had passed?
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.
Simon MacDonald says this is checked into PG2.
http://www.raymondcamden.co...
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
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.
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!
Glad to help.
Thanks so much! Excellent tip, so small and simple yet solves so many problems.
This just rescued me from hours of aggravation.
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?
No - what issues are you having?
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.
If you try it in the Android browser (no PG involved) do you see the same?
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...
@Raymond Camden can u please tell me about the #artdetailpage in the code sample. May be a silly one but....................
Tell you what?
Thank you for this post. Can you tell me how to split the url for multiple parameters?
I am sorry, I didn't see that you already posted an answer for this. Thank you.