Pass parameter between pages using jquery mobile -
what right way pass parameters between pages in jquery mobile. in q&a of jquery mobile, there suggestion plugin. mandatory? please let me know correct way. there no 1 concrete answer. have pass parameters links in page.
http://view.jquerymobile.com/master/demos/faq/pass-query-params-to-page.php
data/parameters manipulation between page transitions
it possible send parameter/s 1 page during page transition. can done in few ways.
reference: https://stackoverflow.com/a/13932240/1848600
solution 1:
you can pass values changepage:
$.mobile.changepage('page2.html', { dataurl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadpage : true, changehash : true }); and read them this:
$(document).on('pagebeforeshow', "#index", function (event, data) { var parameters = $(this).data("url").split("?")[1];; parameter = parameters.replace("parameter=",""); alert(parameter); }); [example][3]:
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> solution 2:
or can create persistent javascript object storage purpose. long ajax used page loading (and page not reloaded in way) object stay active.
var storeobject = { firstname : '', lastname : '' } example: http://jsfiddle.net/gajotres/9kkbx/
solution 3:
you can access data previous page this:
$('#index').live('pagebeforeshow', function (e, data) { alert(data.prevpage.attr('id')); }); prevpage object holds complete previous page.
solution 4:
as last solution have nifty html implementation of localstorage. works html5 browsers (including android , ios browsers) stored data persistent through page refresh.
if(typeof(storage)!=="undefined") { localstorage.firstname="dragan"; localstorage.lastname="gaic"; } example: http://jsfiddle.net/gajotres/j9ntr/
more info
if want learn more topic take @ article. find several solutions examples.
Comments
Post a Comment