javascript - jquery mobile coming back to prev page onclick event is not working -
i trying create 1 app having 3 pages in single page template architecture first page contains login page , using
$.mobile.changepage('xxxx.php'); navigate working in second page having listview there navigating page using
$.mobile.changepage('xxxx.php'); , coming prev page using $.mobile.changepage('xxxx.php');
but when go prev page listview on click delegate method other method not working. works after refresh page.
below code. suggestions great.
secondpage.php
<!doctype html> <html> <head> <title> management</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jquery mobile</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <link rel="stylesheet" href="./js/jquery.mobile-1.3.1.min.css" /> <script src="./js/jquery.mobile-1.3.1.min.js"></script> </head> <body > <div data-role="page" id="demo-page" > <div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-fullscreen="true" data-theme="a" > <!-- data-position="fixed" data-tap-toggle="false" --> <a href="#menu" data-role="button" data-inline="true" data-icon="bars" data-iconpos="notext" class="ui-btn-left" ></a> <a href="" id="edit" data-role="button" data-inline="true" class="ui-btn-right">edit</a> <h1 style="font-size:14px;">event management</h1> </div> <div data-role="content" id="content" > <div id="listdiv" style="margin-top:15%;margin-bottom:10%;"> <ul data-role="listview" id="list" class="ui-listview " data-split-icon="delete" data-filter="true" data-filter-placeholder="search..." > <li data-icon="false" data-name="<?php echo $token_res['event_name'];?>" value="<?php echo $token_res['msg_body'];?>" id="read"> <a href=" " data-transition="slide" >list1</a><a class="deleteme"></a> </li> <li data-icon="false" data-name="<?php echo $token_res['event_name'];?>" value="<?php echo $token_res['msg_body'];?>" id="read"> <a href=" " data-transition="slide" >list2</a><a class="deleteme"></a> </li> </ul> </div> </div><!--end of content --> <script> $("#list").delegate('li',"click",function(){ var ki=$(this).attr('data-name'); //alert("clicked"+$(this).attr('data-name')+$(this).attr('value')); $( document ).one( "pagechange", function() { $.mobile.changepage("edit.php",{type:'post',transition: "slide", data: {'param1':ki}}); }); }); $(document).ready(function() { }); </script> <div data-role="footer" id="mainfooter" data-theme="a" data-fullscreen="true" data-position="fixed" data-tap-toggle="false" style=" bottom:0; width:100%;"> </div> </div><!--end of page --> </body> </html> thirdpage.php
<!doctype html> <html> <head> <title>management</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jquery mobile</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <link rel="stylesheet" href="./js/jquery.mobile-1.3.1.min.css" /> <script src="./js/jquery.mobile-1.3.1.min.js"></script> </head> <body > <div data-role="page" id="demo-page1" > <div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-fullscreen="true" data-theme="a" > <a href="" data-role="button" id="mback" data-inline="true" class="ui-btn-left" >back</a> <a href="" id="medit" data-role="button" data-inline="true" class="ui-btn-right" >edit</a> <h1 style="font-size:14px;">management</h1> </div> <div data-role="content" id="content" > <ul data-role="listview" data-inset="true" style="margin-top:10%;margin-bottom:10%;" > <li data-role="fieldcontain"> <label for="eventbody">message-body</label> <input type="text" id="eventbody" value=<?php echo decode($_request['msg_body']);?> > </li> <li data-role="fieldcontain"> <label for="eventname">message-body</label> <input type="text" id="eventname" value=<?php echo decode($_request['event_name']);?> > </li> <li data-role="fieldcontain"> <label for="sdate">message-body</label> <input type="text" id="sdate" value=<?php echo decode($_request['sdate']);?> > </li> <li data-role="fieldcontain"> <label for="edate">message-body</label> <input type="text" id="edate" value=<?php echo $_request['param1'];?> > </li> <li data-role="fieldcontain" id="nouse" style="display:none;"> <input type="text" id="eid" value=<?php echo decode($_request['id']);?> > </li> <li > <fieldset class="ui-grid-a"> <div class="ui-block-a"><button type="submit" id="mcancel" data-theme="d">cancel</button></div> <div class="ui-block-b"><button type="submit" data-theme="a">submit</button></div> </fieldset> </li> </ul> </div><!--end of content --> <div data-role="footer" id="mainfooter" data-theme="a" data-fullscreen="true" data-position="fixed" data-tap-toggle="false" style=" bottom:0; width:100%;"> </div> <script> $("#mback").click(function(){ alert("alert"); if($("#mback").text()=='back'){ //e.preventdefault(); var page = document.referrer; $.mobile.changepage("home.php",{ transition: 'slide', reloadpage:true, reverse: true }); }else{ $("#eventbody").attr("readonly", "readonly"); $("#eventname").attr("readonly", "readonly"); $("#sdate").attr("readonly", "readonly"); $("#edate").attr("readonly", "readonly"); $("#medit .ui-btn-text").text("edit"); $("#mback .ui-btn-text").text("back"); $('#mback .ui-btn-text').button('refresh'); $("#medit .ui-btn-text").button('refresh'); } }); $(document).ready(function() { // <-- ensures dom ready }); </script> </div><!--end of page --> </body> </html>
i changed list delegate on click method id class working suggested link answer
Comments
Post a Comment