jQuery mobile: URL query string does not change

Question

I'm playing around with jQuery Mobile and ran into some (for me) strange behavior.

I have a bunch of links each pointing to the same jQM page, #otherpage, but with different values for the URL query string, like #otherpage?q=foo, #otherpage?q=bar, and so on. The change to the other page works fine but the query string sticks between clicks, so if I first click the link to #otherpage?q=foo, and then goes back to the first page, all subsequent page changes to #otherpage will have q=foo, no matter what the currently clicked link's href says.

jsFiddle didn't seem to have support for jQM so I put an example here: http://cpak.se/dump/location-search-test.html

I've tried this in Chrome and Safari on Mac.

I use the query string to pass simple data between pages since I have other code hooked into the pagechange events, that is more or less unaware of what earlier code might have done. If I can't get this working I'll have to find another way to pass data around... :P

Cheers!

/Christofer

Answer 1

I've looked up for this issue because it seems a little bit weird indeed. There is a open issue about this: https://github.com/jquery/jquery-mobile/issues/2859

Atm jQuery Mobile doesn't recommend using query parameters:

We don't currently support query parameters as part of the hash fragment, though this is something that's been discussed frequently internally and is on the feature request list.

They advise to use a plugin like:

• https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params
• https://github.com/azicchetti/jquerymobile-router

However, there is a workaround since the data-url of the active page in the DOM DOES change, you can retrieve this with $(".ui-page-active").attr("data-url"); I've tested this on your website and it gave me all 3 uniques URLs

Answer 2

Disabling jQm seems to be the easiest solution for updating the url parameters correctly in the browser. E.g. adding data-ajax="false" in the link anchor and not using $.mobile.changePage.

<a href="#page?id=1" data-ajax="false">

In a dynamic app modify the value of href beforehand.

Answer 3

jQuery Mobile by default does not allow passing query-string parameters to internally linked pages. Check-out the very bottom of this documentation page (the second bullet from the bottom of the page): http://jquerymobile.com/demos/1.0rc3/docs/pages/page-navmodel.html

jQuery Mobile does not support query parameter passing to internal/embedded pages but there are two plugins that you can add to your project to support this feature. There is a lightweight page params plugin and a more fully featured jQuery Mobile router plugin for use with backbone.js or spine.js.