3

I'm trying to pass an object from one page to another and accoriding the JQM docs this should be correct:

$.mobile.changePage( "about/us.html", { data: {paramUno:"Uno", paramDos:11} });

My problem is that I'm not sure of the best way to access those values once us.html has loaded. I added page event callbacks for pageshow, pagebeforeshow, pageinit, and pagechange and in every case, event.data is undefined. Whats the proper way to do this? I'd prefer to not use localStorage or a global/namespaced var unless that's my only choice.

Thank you!

Gajotres
  • 57,309
  • 16
  • 102
  • 130
ChickensDontClap
  • 1,871
  • 4
  • 22
  • 39

1 Answers1

11

Solution

Send them like this:

$.mobile.changePage('page2.html', { dataUrl : "page2.html?parameter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });

And read them like this:

$("#index").live('pagebeforeshow', function (event, data) {
    var parameters = $(this).data("url").split("?")[1];;
    parameter = parameters.replace("parameter=","");  
    alert(parameter);    
});

More examples can be found here: jQuery Mobile: document ready vs page events, just look for chapter: Data/Parameters manipulation between page transitions.

Example:

index.html

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
    <script>
        $(document).on('pagebeforeshow', "#index",function () {
            $(document).on('click', "#changePage",function () {     
                $.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
            }); 
        }); 

        $(document).on('pagebeforeshow', "#second",function () {
            var parameters = $(this).data("url").split("?")[1];;
            parameter = parameters.replace("parameter=","");  
            alert(parameter);
        });         
    </script>
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="index">
        <div data-role="header">
            <h3>
                First Page
            </h3>
        </div>
        <div data-role="content">
          <a data-role="button" id="changePage">Test</a>
        </div> <!--content-->
    </div><!--page-->

  </body>
</html>

second.html

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="second">
        <div data-role="header">
            <h3>
                Second Page
            </h3>
        </div>
        <div data-role="content">

        </div> <!--content-->
    </div><!--page-->

  </body>
</html>

More info

If you want to learn more about this topic take a look at this article. You will find several solutions with examples.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • 1
    May i ask why you are specifying the paramters in both the dataUrl and data fields? Cant you specify the parameters in the data field only and retieve it from only their? – Jono Jul 24 '13 at 10:58
  • @jonney -- I second that question. Why not just specify the data in the data object which is a cleaner implementation, bot in setting and retrieval? – Matthew Pitts Jul 25 '13 at 22:05
  • Yup i thought i was going mad at first as i saw the answer specifiying the data twice – Jono Jul 26 '13 at 08:38
  • The answer seems to demonstrate an example of getting data from the dataURL. What about from the data field? – huggie Dec 01 '14 at 08:40
  • [Here](http://ramkulkarni.com/blog/passing-data-between-pages-in-jquery-mobile/ "ramkulkarni") says "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." So it's the same. – huggie Dec 01 '14 at 08:43
  • Take a look here: http://www.gajotres.net/passing-data-between-jquery-mobile-pages/ – Gajotres Dec 01 '14 at 10:00