html - jQuery Mobile: Get data passed to page via changePage -
i'm trying pass object 1 page , accoriding jqm docs should correct:
$.mobile.changepage( "about/us.html", { data: {paramuno:"uno", paramdos:11} }); my problem i'm not sure of best way access values once us.html has loaded. added page event callbacks pageshow, pagebeforeshow, pageinit, , pagechange , in every case, event.data undefined. whats proper way this? i'd prefer not use localstorage or global/namespaced var unless that's choice.
thank you!
solution
send them this:
$.mobile.changepage('page2.html', { dataurl : "page2.html?parameter=123", data : { 'paremeter' : '123' }, reloadpage : true, changehash : true }); and read them this:
$("#index").live('pagebeforeshow', function (event, data) { var parameters = $(this).data("url").split("?")[1];; parameter = parameters.replace("parameter=",""); alert(parameter); }); more examples can found here: jquery mobile: document ready vs page events, 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 want learn more topic take @ article. find several solutions examples.
Comments
Post a Comment