Bootstrap Modale sind beim ersten Aufruf leer

Ich baue eine NodeJs App mit einigen Bootstrap Modal in der gleichen Ansicht. Der HTML-Code (EJS) wie folgt aussieht:Bootstrap Modale sind beim ersten Aufruf leer

<!--Main link--> 
<a id = "myLink" data-toggle="modal" href="/path/to/myModal.ejs" data-nom="<%=user.name%>" data-id="<%=user._id%>" data-curs="<%=user.level%>" data-body = "<%=user.body%>" data-target="#ModalUpd">Update body</a> 

<!-- Call the remote Modal-->  
    <div class="modal fade" id="modalUpd" role="dialog"> 
     <div class="modal-dialog modal-lg"> 
      <!-- Modal content--> 
      <div class="modal-content"> 
      </div> 
     </div> 
    </div>

Dieser Link mit dieser Fernbedienung Modal ruft:

<!DOCTYPE html> 
    <html> 
     <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <title>Update user</title> 
     </head> 
     <body> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      Update user 
     </div> 
     <div class="modal-body"> 
       <strong>User: </strong><span id="userNom"></span> 
       <strong>Curs: </strong><span id="userCurs"></span> 
<!--BODY UPDATE--> 
       <form role="form" method="post" id="upd"> 
        <label for="BodyUpd">Body</label> 
        <textarea class="form-control" rows="3" id="BodyUpd" form="upd"></textarea> 
       </div> 
       </form> 
      </div>  
     <div class="modal-footer"> 
      <button type="submit" form="upd" class="btn btn-success btn-block" id="updBtn">Update</button> 
     </div> 
     </body> 
    </html>

und es gibt eine jQuery-Datei enthält:

jQuery(document).ready(function(){  
$("#myLink").on("click", function (e) { 
     e.preventDefault(); 
     var userN = $(this).data('nom'); 
     var userC = $(this).data('curs'); 
     var userId = $(this).data('id'); 
     var userbody = $(this).data('body'); 

     $("#userN").text(userN); 
     $("#userC").text(userC); 
     $("#BodyUpd").attr("name", "user.body"); 
     $("#BodyUpd").val(body); 

     $('#updBtn').on('submit', function(e){ 
      e.preventDefault(); 
      var urlPost = "/path/" + userId + "/otherpath/" + "?_method=put"; 
      $('#modalUpd').modal('toggle'); 
      $.ajax({ 
       url: urlPost 
       type: 'POST', 
       data: $('#upd').serialize() 
      }); 
      location.reload(); 
     }); 
     }); 
    });

Es funktioniert perfekt, aber nie beim ersten Anruf. Beim ersten Aufruf des Modales sind alle Felder leer und es liegen keine Benutzerdaten vor. Wenn ich das Modal schließe und erneut anrufe, erscheinen alle Benutzerdaten im Modal. Ich bin ziemlich neu in jQuery und ich denke, ich mache etwas falsch mit "$ (document) .ready", aber ich weiß nicht, was ... Ich habe viele verschiedene Möglichkeiten ausprobiert, aber das ist die Das Beste, was ich gefunden habe. Hoffe, du kannst mir helfen. Danke!

Quelle

2017-04-26 cfibla

Sie rufen document.ready in document.on click auf? tun Sie es andersherum –

Warum haben Sie eine Doc-Ready-Funktion innerhalb eines onclick? Das ist die Ursache Ihres Problems. doc ready sollte einmal ausgeführt werden, wenn die Seite vollständig geladen wurde. Es sollte niemals in einer anderen Funktion sein. – Korgrue

Ich habe versucht, document.ready vor onclick (wie ich den Code auf Frage bearbeitet) zu setzen, aber es funktioniert immer noch nicht. – cfibla

Endlich habe ich die Lösung gefunden und es war ziemlich einfach: Ich hatte etwa 30 document.ready in der JS-Datei. Eine für jede Funktion. Jetzt habe ich alle Funktionen in einem Dokument eingeschlossen. Vielleicht ist es nicht zu süß, aber es funktioniert.

Quelle

2017-05-15 08:38:32 cfibla

Bootstrap Modale sind beim ersten Aufruf leer

Antwort

Verwandte Themen