2017-04-26 13 views
0

同じビューでいくつかのブートストラップモーダルを持つNodeJsアプリケーションを構築しています。 最初の呼び出しでブートストラップのモーダルが空になる

<!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のファイルがある:このリンクは、このリモートモーダルを呼び出す

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

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"と何か間違っていると思いますが、私は何が分かっていません...私はさまざまな可能性を試しましたが、これは最高の私が見つかりました。 あなたが私を助けてくれることを願っています。 ありがとう!

+0

document.onをクリックするとdocument.readyが呼び出されますか?それ以外のやり方をしてください –

+0

なぜあなたはonclickの中にdocレディ機能を持っていますか?それがあなたの問題の原因です。 doc readyは、完全なページ・ロード時に一度実行する必要があります。それは決して別の関数の中にあるべきではありません。 – Korgrue

+0

私は問題のコードを編集したので、onclickの前にdocument.readyを置こうとしましたが、それでも動作しません。 – cfibla

答えて

0

最後に私は解決策を見つけました。それはかなりシンプルでした:私は約30のdocument.readyをJSファイルに持っていました。各機能ごとに1つ。これで、すべての関数を1つのdocument.readyにまとめました。多分それはあまりにもかわいいではありませんが、それは動作します。

関連する問題