venir mobile jquery retour à prev la page événement onclick ne fonctionne pas

Je suis en train de créer une application qui est d'avoir trois pages dans l'architecture du modèle d'une seule page première page contient la page de connexion et j'utilisevenir mobile jquery retour à prev la page événement onclick ne fonctionne pas

$.mobile.changePage('xxxx.php'); pour naviguer son travail correctement deuxième page j'ai listview à partir de là je navigue vers une autre page en utilisant

$.mobile.changePage('xxxx.php'); et pour venir dernière page précédente J'utilise ce $.mobile.changePage('xxxx.php');

Mais quand je vais à prev la page listview sur clic méthode déléguée tout sa méthode ne fonctionne pas. Mais cela fonctionne après que j'aie rafraîchi la page.

Voici mon code. Toutes les suggestions seront bonnes.

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>

Source

2013-07-24 Ghouse

i changé le délégué de la liste sur la méthode de clic de id en classe alors qu'il fonctionne correctement comme suggéré par le lien answer

Source

2013-07-24 09:40:28 Ghouse

Pourquoi utilisez-vous pas la fonction de retour automatique. Ayez juste cela dans votre script après jquery-1.9.1.min.js et avant jquery.mobile-1.3.1.min.js:

$ .mobile.page.prototype.options.addBackBtn = true; $ .mobile.page.prototype.options.backBtnText = "Précédent"; Ensuite, il ajouterait automatiquement le balisage des boutons sur chaque page à l'exception du premier et remonterait aux pages précédentes.

Source

2013-07-24 08:34:06 Sheetal

i besoin de recharger les thats page précédente pourquoi je suis en cours pour ce script – Ghouse

pourquoi avez-vous besoin recharger la page? – Gajotres

je suis mise à jour ligne listview dans la troisième page et il devrait être refléter dans la deuxième page et même si de nouvelles données sont ajoutées dans la base de données il reflétera immédiatement – Ghouse

venir mobile jquery retour à prev la page événement onclick ne fonctionne pas

Répondre

Questions connexes