{"id":311,"date":"2012-06-03T14:16:47","date_gmt":"2012-06-03T08:46:47","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=311"},"modified":"2012-06-03T14:16:47","modified_gmt":"2012-06-03T08:46:47","slug":"passing-data-between-pages-in-jquery-mobile","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/passing-data-between-pages-in-jquery-mobile\/","title":{"rendered":"Passing data between pages in JQuery Mobile"},"content":{"rendered":"

I am working on a JQuery Mobile application which is based on single page template<\/a> 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.<\/p>\n

I have a couple of pages in the application and I switch between pages using changePage<\/a>. One of the issues I struggled a bit initially was, how to pass data between pages? The signature of changePage is
\n<\/p>\n

$.<\/span>mobile.<\/span>changePage(<\/span>to,<\/span>options)<\/span><\/pre>\n
‘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\u00a0(object<\/em>\u00a0or string, default: undefined) The data to send with an Ajax page request.”.<\/p>\n
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.<\/p>\n
$.<\/span>mobile.<\/span>changePage(<\/span>\"<\/span>newPage.html?param1=value1<\/span>\"<\/span>)<\/span>;<\/span><\/pre>\n
OR<\/p>\n
$.<\/span>mobile.<\/span>changePage(<\/span>\"<\/span>newPage.html<\/span>\"<\/span>,<\/span> {<\/span>data:<\/span>{<\/span>param1:<\/span>'value1'<\/span>}<\/span>}<\/span>)<\/span>;<\/span><\/pre>\n
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.<\/p>\n
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<\/a> . To use this plug-in, include jquery.url.js after you include jquery file –<\/p>\n
<<\/span>script src=<\/span>\"<\/span>jquery-1.7.2.js<\/span>\"<\/span>><\/span><<\/span>\/<\/span>script><\/span>\n<<\/span>script src=<\/span>\"<\/span>jquery.mobile-1.1.0.js<\/span>\"<\/span>><\/span><<\/span>\/<\/span>script><\/span>\n<<\/span>script src=<\/span>\"<\/span>jquery.url.js<\/span>\"<\/span>><\/span><<\/span>\/<\/span>script><\/span><\/pre>\n
Then you can retrieve URL params as follows –<\/p>\n
<<\/span>div data-<\/span>role=<\/span>\"<\/span>page<\/span>\"<\/span> id=<\/span>\"<\/span>newPageId<\/span>\"<\/span>><\/span>\n    <<\/span>script type=<\/span>\"<\/span>text\/javascript<\/span>\"<\/span>><\/span>\n        $(<\/span>\"<\/span>#newPageId<\/span>\"<\/span>)<\/span>.<\/span>on(<\/span>\"<\/span>pageshow<\/span>\"<\/span>,<\/span> onPageShow)<\/span>;<\/span>\n\n        function<\/span> onPageShow(<\/span>e,<\/span>data)<\/span>\n        {<\/span>\n            var<\/span> url =<\/span> $.<\/span>url(<\/span>document.<\/span>location)<\/span>;<\/span>\n\n            var<\/span> param1 =<\/span> url.<\/span>param(<\/span>\"<\/span>param1<\/span>\"<\/span>)<\/span>;<\/span>\n        }<\/span>\n    <<\/span>\/<\/span>script><\/span>\n<<\/span>\/<\/span>div><\/span><\/pre>\n
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.<\/p>\n
in the page where you are calling changePage –<\/p>\n
$.<\/span>mobile.<\/span>changePage(<\/span>\"<\/span>newPage.html<\/span>\"<\/span>,<\/span>{<\/span>data:<\/span>{<\/span>param1:<\/span>encodeURIComponent(<\/span>'value with spaces'<\/span>)<\/span>}<\/span>}<\/span>)<\/span>;<\/span><\/pre>\n
And in the page where you want to retrieve param values –<\/p>\n
var<\/span> url =<\/span> $.<\/span>url(<\/span>document.<\/span>location)<\/span>;<\/span>\n\nvar<\/span> param1 =<\/span> url.<\/span>param(<\/span>\"<\/span>param1<\/span>\"<\/span>)<\/span>;<\/span>\nif<\/span> (<\/span>param1 !=<\/span> undefined)<\/span>\n    param1 =<\/span> decodeURIComponent(<\/span>param1)<\/span>;<\/span><\/pre>\n
-Ram Kulkarni<\/p>\n
Update :
\n<\/strong>I was asked to provide a complete example for the scenario I discussed in this post. So I have posted a demo here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 … <\/p>\n
Continue reading “Passing data between pages in JQuery Mobile”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[30,1],"tags":[29,7,31],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-51","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/311"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=311"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/311\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=311"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}