使用Bootstrap将数据从模态传递到父窗口 [英] Pass data to parent window from modal using Bootstrap

问题描述

例如，我有一个页面，该页面在加载时列出所有员工.页面上有一个按钮，单击该按钮时会使用表单初始化(引导程序)模态.我填充表单，然后单击提交".如果插入成功，我将返回json对象作为响应，以便可以将新创建​​的员工添加到列表(位于模式后面)中，而无需刷新页面.

As an example, I have a page that when loads, lists all employees. There is a button on the page that when clicked, initializes a (bootstrap) modal with a form. I populate the form, and click 'Submit'. If the insert was successful, I get the json object back as a response so that I can add the newly created employee to the list - which is behind the modal - without a page refresh.

一切正常.我得到了json-现在可以将数据发送回父窗口了.我知道这会有些棘手，但是这篇SO帖子给了我希望.

Everything is working fine. I am getting the json back - and I'm ready to send the data back to the parent window. I knew it would be somewhat tricky, but this SO post gave me hope.

jQuery

Employee.createEmployee(function (response) {
    $(window.opener.document).find('#mytable').html($.parseJSON(response));
});

到目前为止，我所能做的就是找回此错误:

So far all I'm able to do is get this error back:

Uncaught TypeError: Cannot read property 'document' of null

我通过javascript而不是数据属性启动模式，希望可以更好地返回到父窗口:

I am launching the modal via javascript instead of data-attribute in hopes that would allow a better hook back to the parent window:

jQuery

$('#createemployeebtn').click(function (event) {
    $('#newemployeemodal').modal();
});

没有这种运气.

推荐答案

您可以使用模态访问的任何信息也可以添加到页面中.

Whatever information you can access with your modal can also be added to your page.

$(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标签现在将显示新文本.

This example pops a modal when a button is clicked. You can then enter text in the input and click the save changes button, and the h1 tag on the page will be set to use that text. You can pop the modal again, change the text in the input field, click the save changes button, and the h1 tag will now display the new text.

此示例应说明，模式中设置的所有项目都可用于设置生成该模式的页面上的项目.页面可访问的任何元素或变量，您的模式均可访问以及.

This example should illustrate that whatever items are set in the modal can be used to set items on the page that produces that modal. Any element or variable the page has access to, your modal has access to as well.

这篇关于使用Bootstrap将数据从模态传递到父窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！