举个例子,我有一个页面,加载时会列出所有员工。页面上有一个按钮,单击该按钮时,会使用表单初始化( Bootstrap )模式。我填写表格,然后单击“提交”。如果插入成功,我将返回 json 对象作为响应,以便我可以将新创建的员工添加到列表(位于模式后面),而无需刷新页面。
一切正常。我正在取回 json - 并且我已准备好将数据发送回父窗口。我知道这会有点棘手,但是 this SO post gave me hope .
jQuery
Employee.createEmployee(function (response) {
$(window.opener.document).find('#mytable').html($.parseJSON(response));
});
到目前为止,我所能做的就是恢复此错误:
Uncaught TypeError: Cannot read property 'document' of null
我通过 javascript 而不是数据属性启动模式,希望能够更好地 Hook 回父窗口:
jQuery
$('#createemployeebtn').click(function (event) {
$('#newemployeemodal').modal();
});
没有这样的运气。
最佳答案
您可以通过模式访问的任何信息也可以添加到您的页面中。
$(function() {
$('#btnLaunch').click(function() {
$('#myModal').modal('show');
});
$('#btnSave').click(function() {
var value = $('input').val();
$('h1').html(value);
$('#myModal').modal('hide');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<h1></h1>
<button type="button" id="btnLaunch" class="btn btn-primary">Launch Modal</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Enter text:</p>
<input type="text" id="txtInput">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btnSave" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
此示例在单击按钮时弹出一个模式。然后,您可以在输入中输入文本并单击“保存更改”按钮,页面上的 h1 标记将设置为使用该文本。您可以再次弹出模式,更改输入字段中的文本,单击保存更改按钮,h1 标签现在将显示新文本。
这个示例应该说明,无论模态中设置的项目都可以用于设置生成该模态的页面上的项目。页面有权访问的任何元素或变量,您的模态都可以访问也是如此。
关于jquery - 使用 Bootstrap 将数据从模式传递到父窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27554027/