jquery mobile coming back to prev page onclick event is not working

https://stackoverflow.com/questions/17825907

04-06-2022
|

Question

I am trying to create one app which is having three pages in single page template architecture first page contains login page and i am using

$.mobile.changePage('xxxx.php'); to navigate its working properly in second page i am having listview from there i am navigating to another page using

$.mobile.changePage('xxxx.php'); and for coming back prev page i am using this $.mobile.changePage('xxxx.php');

But when i go to prev page listview on click delegate method any other method is not working. But it works after I refresh the page.

Below is my code. Any suggestions will be 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 the DOM is ready

      });
      </script>

     </div><!--end of page -->

    </body>
    </html>

Solution

i changed the list delegate on click method from id to class then it is working properly as suggested by the link answer

OTHER TIPS

Why don't you use the auto back feature. Just have this in your script after jquery-1.9.1.min.js and before jquery.mobile-1.3.1.min.js:

$.mobile.page.prototype.options.addBackBtn = true; $.mobile.page.prototype.options.backBtnText = "Back";

Then it would automatically add back button markup on each page except first one and route backwards to the previous pages.

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow