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">×</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); });