Bootstrap 4将数据传递给远程模式

我正在使用NodeJs和Express。 我需要将数据库中的一些数据(MongoDB)传递到Bootstrap 4中的远程模式。我知道Bootstrap在v4中删除了“remote”选项,但是我需要在不同的文件中有不同的内容。 现在,我可以从数据库发送数据,用远程内容打开模式,但是这个远程内容还没有收到来自数据库的数据。 这是我的代码:

触发button:

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

我错在哪里? 任何人都可以帮忙吗? 谢谢!

尝试将更新脚本放在$(document).ready(); – 这将确保浏览器等到完整的文档(包括你的模式)被加载,然后才执行封闭的内容。

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