我正在使用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">×</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
});
我哪里错了? 有人可以帮忙吗? 谢谢!
答案 0 :(得分:1)
尝试将更新脚本放在$(document).ready();
中 - 这将确保浏览器等到装入完整文档(包括您的模态)之后再执行所附的内容。
$(document).ready(function() {
$(".form-group #fooHere").val(foo);
$(".form-group #opFighters").val(fighter);
});