[转]Passing data between pages in JQuery Mobile mobile.changePage

本文转自：http://ramkulkarni.com/blog/passing-data-between-pages-in-jquery-mobile/

 

I am working on a JQuery Mobile application which is based on single page templatedesign. 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.