ブートストラップ4はリモートモーダルにデータを渡します

Question

私はNodeJsとExpressで作業しています。データベース（MongoDB）からブートストラップ4のリモートモーダルにデータを渡す必要があります。私はブートストラップがv4の "リモート"オプションを削除したことを知っていますが、別のファイルに別の内容を入れる必要があります。 今のところ、DBからデータを送信し、リモートコンテンツでモーダルを開きますが、このリモートコンテンツはDBからデータを受信して​​いません。

トリガーボタン：

<a id="btn1" data-remote="myContent.ejs" data-foo="<%=some.data1%>" data-fighter="<%=some.data2%>" data-toggle="modal" data-target="#Modal1">Click me!</a> 

（同じファイル内）モーダル：

<div class="modal fade" id="Modal1" role="dialog"> 
<div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4>My Modal</h4> 
    </div> 
    <div class="modal-body" id="modalR"> 
<!--REMOTE CONTENT GOES HERE--> 
     <script type="text/javascript" charset="utf-8"></script> 
    </div> 
    <div class="modal-footer"> 
     <div class="form-group col-md-offset-9"> 
      <button type="submit" class="btn btn-default" data-dismiss="modal">Cancel</button> 
      <button type="submit" class="btn btn-primary" form="form1">Save</button> 
     </div> 
    </div> 
    </div> 
</div> 

リモートコンテンツ（myContent.ejs）：

これは私のコードです

<form role="form" method="post" action="/fooAction" id="form1"> 
<div class="form-group"> 
    <label for="fooHere">foo</label> 
    <input type="text" class="form-control" id="fooHere" name="fooHere" value =""> 
</div> 
<div class="form-group" id="fighter"> 
    <label for="fighterHere">Fighters</label> 
    <select class="form-control" id="fighterHere" name="fighterHere"> 
     <option id="opFighters" value=""></option> 
     <option value="Fighter1">One fighter</option> 
     <option value="Fighter2">Another Fighter</option> 
    </select> 
</div> 
</form> 

JSファイル：

//LOAD REMOTE-CONTENT (Bootstrap 4 removed the "remote" option) 
$('body').on('click','[data-toggle="modal"]', function(){ 
jQuery($(this).data("target")+' .modal-body').load($(this).data("remote")); 
}); 
//PASS DATA TO CONTENT 
$(document).on("click", "#btn1", function() { 
var foo = $(this).data('foo'); 
var fighter = $(this).data('fighter'); 
console.log (foo); //Works! Console shows the correct data 
console.log (fighter); //Too! 
$(".form-group #fooHere").val(foo); //Doesn't show anything 
$(".form-group #opFighters").val(fighter); //Doesn't show anything 
}); 

どこが間違っていますか？ 誰でも助けることができますか？ ありがとう！

Answer 1

$(document).ready();の内部に更新スクリプトを入れてください。これにより、ブラウザーは、完全な文書（あなたのモーダルを含む）が読み込まれて、囲まれた内容を実行するまで待つことができます。

$(document).ready(function() { 
    $(".form-group #fooHere").val(foo); 
    $(".form-group #opFighters").val(fighter); 
});