첫 번째 호출에서 부트 스트랩 모달이 비어 있습니다.

동일한보기에서 일부 부트 스트랩 모달을 사용하여 NodeJs 앱을 빌드하고 있습니다.첫 번째 호출에서 부트 스트랩 모달이 비어 있습니다.

<!--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>

이 링크는이 원격 모달 호출 :

<!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>

및 포함 된 jQuery를 파일이 있습니다 :

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(); 
     }); 
     }); 
    });

그것은 완벽하게 작동,하지만 결코 것처럼 HTML은 (EJS) 보이는 첫 번째 통화에서. 처음 모달을 호출하면 사용자 데이터가없는 모든 필드가 비어 있습니다. 모달을 닫고 다시 호출하면 모든 사용자 데이터가 모달에 나타납니다. 저는 jQuery에서 꽤 새로 생겼고 "$ (document) .ready"로 뭔가 잘못하고 있다고 생각합니다. 그러나 나는 ... 다른 가능성을 많이 시도했지만, 이것은 내가 찾은 최고의. 당신이 나를 도울 수 있기를 바랍니다. 감사합니다.

출처

2017-04-26 cfibla

document.on 클릭 할 때 document.ready를 호출하고 있습니까? 다른 방법으로 처리하십시오 –

왜 당신은 onclick 안에 doc 준비 기능이 있습니까? 이것이 귀하의 문제의 근원입니다. doc 준비는 전체 페이지로드시 한 번 실행해야합니다. 다른 함수 안에 있으면 안됩니다. – Korgrue

onclick 전에 document.ready를 넣으려고했지만 (문제의 코드를 편집 했으므로) 여전히 작동하지 않습니다. – cfibla

마지막으로 해결책을 찾았습니다. JS 파일에 약 30 개의 document.ready가 있습니다. 각 기능마다 하나씩. 이제 모든 기능을 하나의 document.ready로 묶었습니다. 아마도 너무 귀엽지는 않지만 작동합니다.

출처

2017-05-15 08:38:32 cfibla

첫 번째 호출에서 부트 스트랩 모달이 비어 있습니다.

답변

관련 문제