php - How to get id from one page to other page? -
i using jquery mobiles 1.4.2
i have refer id 1 page other page.
html
<div data-role="page"> <div data-role="header"> hello</div> <div data-role="content"> <a href="#freeadd" id="ofrecer" data-role="button" data-mini="true">ofrezco en venta</a> <a href="#freeadd" id="ofrecer" class="aliq" data-role="button" data-mini="true">ofrezco en alquiler</a> <a id="busco" href="#freeadd" data-role="button" data-mini="true">buscar</a> </div> </div> <div data-role="page" id="freeadd"> <div data-role="header"> display id </div> </div> in next page want display heading depending on id(instead of display id).please 1 me..
several solutions exist:
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:
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:
$(document).on('pagebeforeshow', '#index',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/
find more them here.
Comments
Post a Comment