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

Question

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

触发按钮：

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