I am working on a JQuery Mobile application which is based on single page template design. In this design, there is one main page in the application and all other pages are loaded by JQuery using AJAX and content is embedded into the DOM of the main page.
I have a couple of pages in the application and I switch between pages using changePage. One of the issues I struggled a bit initially was, how to pass data between pages? The signature of changePage is
$.mobile.changePage(to,options)
‘to’ argument is URL of the page to which you want to change to. ‘options’ is an object with many different keys. One of the keys is ‘data’ and the documentation says – “data (object or string, default: undefined) The data to send with an Ajax page request.”.
So I could pass data to the page I want to change to either by passing URL parameters directly, or as ‘data’ in ‘options’ in changePage i.e.
$.mobile.changePage("newPage.html?param1=value1");
OR
$.mobile.changePage("newPage.html", {data:{param1:'value1'}});
I thought passing values in ‘data’ in ‘options’ is cleaner solution. But the problem is that JQuery Mobile does not help you to retrieve ‘data’ in the new page. I was hoping that any of the page event callback functions of JQuery Mobile, like pageload, pagechange etc., would pass ‘data’ that was passed from invoking page as one of the arguments. But it does not.
BTW, changePage function also appends parameter passed as ‘data’ to the page URL, so in that sense above two options are the same. So you will have to handle retrieving data yourself. I thought either JQuery or JQuery Mobile would have convenience functions to retrieve URL parameter, but surprisingly they don’t have. However there is a JQuery plug-in which does this – JQuery URL Parser . To use this plug-in, include jquery.url.js after you include jquery file -
<script src="jquery-1.7.2.js"></script> <script src="jquery.mobile-1.1.0.js"></script> <script src="jquery.url.js"></script>
Then you can retrieve URL params as follows -
<div data-role="page" id="newPageId"> <script type="text/javascript"> $("#newPageId").on("pageshow", onPageShow); function onPageShow(e,data) { var url = $.url(document.location); var param1 = url.param("param1"); } </script> </div>
When passing data values, JQuery Mobile replaces spaces (in values) with ‘+’, so you will have to replace them when you get param values. Or you can use encodeURIComponent and decodeURIComponent e.g.
in the page where you are calling changePage -
$.mobile.changePage("newPage.html",{data:{param1:encodeURIComponent('value with spaces')}});
And in the page where you want to retrieve param values -
var url = $.url(document.location); var param1 = url.param("param1"); if (param1 != undefined) param1 = decodeURIComponent(param1);
-Ram Kulkarni
Update :
I was asked to provide a complete example for the scenario I discussed in this post. So I have posted a demo here.
do you have a fb fanpage
No, I don’t
Why the hell do you need to pass data between pages when you keep thé js context ?
What do you mean by js context?
thanks
easy and clear solution !
I’ll take a guess at what Eric means. I think he’s referring to keeping settings in a global context object so when the page changes, the data persists. The difficult part about this approach is that when all you need is to pass simple keys/parameters between pages it’s just easier to put those keys in URLs as parameters. This saves you from having to write an on click event handler for those links to save that data to a context object. This would however not be a good approach if you are going to put more than just a parameter into the URL because browsers have their own URL character limits that will bite you, so on that count, Eric’s advice should probably be taken.
Yes, I had guessed that Eric meant global scope, but just wanted to be sure …
I do agree with you that URL params are good when data size is small and global scope is good when data size is large.
Heads up to everyone using parameters in URLs. Once a user goes to something like /index.html?param=foo and then they try to go to index.html?param=bar they will always end up at /index.html?param=foo. The patch from flodev is currently working for me against the 1.1.1 tag.
See https://github.com/jquery/jquery-mobile/issues/2859
thanks for the toutorial
Thanks my friend, I was so tired and disappointed finding it, but you give me the light
Thanks For the post. I was sooooo bored to find out passing data between html pages in phonegap android apps. I didn’t try it. bt may be this is the solution.
Good presentation, You give is very helpful and I thank you very much..
02-01 15:43:51.282: E/Web Console(1172): TypeError: Result of expression ‘$.mobile’ [undefined] is not an object. at file:///android_asset/www/index.html:13
Ram Kulkarni
Do you have source code for us to download?
Hello Ram,
I hope you can send us or me a complete running source code to test. And that will be a big help. Just zip it.
I have posted a complete demo here.