php - jQuery Mobile: Sending data from one page to the another -
php - jQuery Mobile: Sending data from one page to the another -
i have problem, need send info (an id) list page. html code:
</head> <body> <div data-role="page" id="index"> <div data-role="header"> <h1>players app</h1> </div><!--/header--> <div data-role="content"> <ul data-role="listview" id="ul_list" data-inset="true"> </ul> </div><!--/content--> <div data-role="footer"> <h4>players list</h4> </div><!--/footer--> </div><!--/page-index--> <div data-role="page" id="detail" data-add-back-btn="true"> <div data-role="header"> <h1>player detail</h1> </div><!--/header--> <div data-role="content"> <ul data-role="listview" id = "" data-inset="true"> </ul> </div><!--/content--> <div data-role="footer"> <h4>players list</h4> </div><!--/footer--> </div><!--/page-detail--> </body> </html> and script:
var lista = new array(); var squadramanager={}; squadramanager.initarray=null; squadramanager.printarray=null; squadramanager.initarray = function(){ lista[0] = new players(); lista[0].setnome("nonho"); lista[0].setruolo("difensore"); lista[0].setcognome("rossi"); lista[0].setnmaglia("01"); lista[1] = new players(); lista[1].setnome("marco"); lista[1].setruolo("blabla"); lista[1].setcognome("mariani"); lista[1].setnmaglia("22"); lista[2] = new players(); lista[2].setnome("carlo"); lista[2].setruolo("soffiatore"); lista[2].setcognome("bianchi"); lista[2].setnmaglia("01"); } squadramanager.loaderlist = function(){ jquery.each( lista, function(chiave, oggetto){ //leggo valori oggetti in array jquery("#ul_list").append("<li><a id='"+ oggetto.getid() +"det' href='#dettaglio'>"+oggetto.getcognome()+"</a></li>").listview("refresh"); }); } squadramanager.init = function(){ /*init */ squadramanager.initarray(); squadramanager.loaderlist(); } jquery(function(){ squadramanager.init(); }); i neet send id of clicked list next page. final thought load in sec page "#detail" detail of player (the player in separate class).
thank response
one html / multiple pages template
here's illustration of passing attribute listview sec page in 1 html multi page template:
http://jsfiddle.net/gajotres/gv7uw/ - js object storage container
http://jsfiddle.net/gajotres/j9ntr/ - localstorage storage container
basically want create persistent javascript object storage purpose. long ajax used page loading (and page not reloaded in way) object remain active.
var storeobject = { firstname : '', lastname : '' } multiple html pages template unfortunately illustration can't done through jsfiddle post needed files:
html 1 :
<!doctype html> <html> <head> <title>jqm complex demo</title> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script src="operations.js"></script> </head> <body> <div data-role="page" id="index"> <div data-theme="a" data-role="header"> <h3> first page </h3> <a href="#second" class="ui-btn-right">next</a> </div> <div data-role="content"> <ul data-role="listview" data-theme="a" id="test-listview"> <li><a href="page2.html?id=1">link 1</a></li> <li><a href="page2.html?id=2">link 2</a></li> <li><a href="page2.html?id=3">link 3</a></li> <li><a href="page2.html?id=4">link 4</a></li> <li><a href="page2.html?id=5">link 5</a></li> </ul> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> </body> </html> html 2 :
<!doctype html> <html> <head> <title>jqm complex demo</title> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div data-role="page" id="second"> <div data-theme="a" data-role="header"> <h3> sec page </h3> <a href="#index" class="ui-btn-left">back</a> </div> <div data-role="content"> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> </body> </html> operations.js :
$(document).on('pageshow', '#second', function(){ alert(getparameterbyname("id")); }); function getparameterbyname(name) { homecoming decodeuri( (regexp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] ); } user authentication demo another illustration can't shown jsfiddle example, unlike previous one, 1 have attached sql script. advise create improve db reading logic, 1 simple solution, prone sql injection, work assignment:
index.php :
<!doctype html> <html> <head> <title>jqm complex demo</title> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <style> #login-button { margin-top: 30px; } </style> <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 src="js/custom.js"></script> </head> <body> <div data-role="page" id="login"> <div data-theme="a" data-role="header"> <h3>login page</h3> </div> <div data-role="content"> <label for="username">enter username:</label> <input type="text" value="" name="username" id="username"/> <label for="password">enter password:</label> <input type="password" value="" name="password" id="password"/> <a data-role="button" id="login-button" data-theme="b">login</a> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> <div data-role="page" id="index"> <div data-theme="a" data-role="header"> <h3></h3> </div> <div data-role="content"> here goes content </div> <div data-theme="a" data-role="footer" data-position="fixed"> <h3>page footer</h3> </div> </div> </body> </html> json.php :
<?php $var1 = $_request['action']; // dont need action tutorial, in complex code need way determine ajax action nature $jsonobject = json_decode($_request['outputjson']); // decode json object readable php object $username = $jsonobject->{'username'}; // username object $password = $jsonobject->{'password'}; // password object mysql_connect("localhost","root",""); // conect mysql, first parameter location, sec mysql username , 3rd 1 mysql password @mysql_select_db("test") or die( "unable select database"); // connect database called test $query = "select * users user_name = '".$username."' , user_pass = '".$password."'"; $result=mysql_query($query); $num = mysql_numrows($result); if($num != 0) { echo "true"; } else { echo "false"; } ?> custom.js :
$(document).on('pagebeforeshow', '#login', function(){ $('#login-button').on('click', function(){ if($('#username').val().length > 0 && $('#password').val().length > 0){ userobject.username = $('#username').val(); // set username object userobject.password = $('#password').val(); // set password object // convert userobject json string representation var outputjson = json.stringify(userobject); // send info server through ajax phone call // action functionality want phone call , outputjson our info ajax.sendrequest({action : 'login', outputjson : outputjson}); } else { alert('please fill nececery fields'); } }); }); $(document).on('pagebeforeshow', '#index', function(){ if(userobject.username.length == 0){ // if username not set (lets after forcefulness page refresh) login page $.mobile.changepage( "#login", { transition: "slide"} ); // in case result true alter page index } $(this).find('[data-role="header"] h3').append('wellcome ' + userobject.username); // alter header wellcome msg //$("#index").trigger('pagecreate'); }); // ajax function set var ajax = { sendrequest:function(save_data){ $.ajax({url: 'http://localhost/jsonp_tutorial/json.php', data: save_data, async: true, beforesend: function() { // callback function trigger before info sent $.mobile.showpageloadingmsg(true); // show ajax spinner }, complete: function() { // callback function trigger on info sent/received finish $.mobile.hidepageloadingmsg(); // hide ajax spinner }, success: function (result) { if(result == "true") { $.mobile.changepage( "#index", { transition: "slide"} ); // in case result true alter page index } else { alert('login unsuccessful, please seek again!'); // in case result false throw error } // callback function trigger on successful action }, error: function (request,error) { // callback function trigger on unsuccessful action alert('network error has occurred please seek again!'); } }); } } // utilize object store username , password before serialize , send server. part can done in numerous ways approach because simple var userobject = { username : "", password : "" } localhost.sql :
-- phpmyadmin sql dump -- version 3.4.10.1 -- http://www.phpmyadmin.net -- -- host: localhost -- generation time: feb 02, 2013 @ 11:58 -- server version: 5.5.20 -- php version: 5.3.10 set sql_mode="no_auto_value_on_zero"; set time_zone = "+00:00"; /*!40101 set @old_character_set_client=@@character_set_client */; /*!40101 set @old_character_set_results=@@character_set_results */; /*!40101 set @old_collation_connection=@@collation_connection */; /*!40101 set names utf8 */; -- -- database: `test` -- create database `test` default character set latin1 collate latin1_swedish_ci; utilize `test`; -- -------------------------------------------------------- -- -- table construction table `users` -- create table if not exists `users` ( `user_id` int(11) not null auto_increment, `user_name` varchar(64) not null, `user_pass` varchar(64) not null, primary key (`user_id`) ) engine=innodb default charset=utf8 auto_increment=2 ; -- -- dumping info table `users` -- insert `users` (`user_id`, `user_name`, `user_pass`) values (1, 'gajotres', 'testpass'); /*!40101 set character_set_client=@old_character_set_client */; /*!40101 set character_set_results=@old_character_set_results */; /*!40101 set collation_connection=@old_collation_connection */; more info
if want larn more topic take @ article. find several solutions examples.
php jquery html5 cordova jquery-mobile
Comments
Post a Comment