jquery - How to display contents of first page using localStorage in second page -
i new phonegap. trying display contents of first page when valid user logins in sec page. using below script accomplish this. not getting how display first page contents after changepage called using localstorage?
<html> <head> <title>submit form via ajax</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" /> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script> </head> <body> <script> function onsuccess(data, status) { info = $.trim(data); //$("#notification").text(data); alert(data); if(data=="success"){ // store info storeobject.username = $("#username").val(); storeobject.email = $("#email").val(); //change page $.mobile.changepage("#secondpage"); } } function onerror(data, status) { // handle error } $(document).ready(function() { $("#submit").click(function(){ var formdata = $("#callajaxform").serialize(); $.ajax({ type: "post", url: “myurl”, cache: false, data: formdata, success: onsuccess, error: onerror }); homecoming false; }); }); // store object var storeobject = { username : '', email : '' } //not getting below alert when sec page loads $(document).on('pageaftershow', '#secondpage', function(){ alert("second page"); <--- **not displaying when secondpage loads** alert('my name ' + storeobject.username + ' ' + storeobject.email); }); </script> <!-- phone call first page --> <div data-role="page" id="firstpage"> <div data-role="header"> <h1>call ajax</h1> </div> <div data-role="content"> <form id="callajaxform"> <div data-role="fieldcontain"> <label for="username">user name</label> <input type="text" name="username" id="username" value="" /> <label for="lastname">last name</label> <input type="text" name="lastname" id="lastname" value="" /> <label for="email">email</label> <input type="text" name="email" id="email" value="" /> <label for="lastname">password</label> <input type="password" name="password" id="password" value="" /> <button data-theme="b" id="submit" type="submit">submit</button> </div> </form> </div> <div data-role="footer"> <h1>footer</h1> </div> </div> <!-- phone call secondpage page --> <div data-role="page" id="secondpage"> <div data-role="header"> <h1>second page</h1> </div> <div data-role="content"> </div> <div data-role="footer"> <h1>footer</h1> </div> </div> </body>
you can set , localstorage info way
set content
if(data=="success"){ // store info localstorage.setitem('username',$("#username").val()); localstorage.setitem('email',$("#email").val()); //change page $.mobile.changepage("#secondpage"); } get content in sec page
localstorage.getitem('username'); localstorage.getitem('email'); jquery html5 jquery-mobile dom local-storage
No comments:
Post a Comment