使用Bootstrap从模态窗口向父窗口传递数据

Question

使用Bootstrap从模态窗口向父窗口传递数据

6

作为一个例子，我有一个页面，当它加载时，会列出所有的员工。页面上有一个按钮，当点击它时，会初始化一个（Bootstrap）模态框与一个表单。我填充表单并点击“提交”。如果插入成功，我得到一个JSON对象作为响应，以便我可以将新创建的员工添加到模态框后面的列表中 - 无需刷新页面。

一切都运作良好。我收到了JSON返回值，并准备将数据发送回父窗口。我知道这可能有点棘手，但这个SO帖子让我感到有希望。 jQuery

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

到目前为止，我所能做的就是获得以下错误信息：

Uncaught TypeError: Cannot read property 'document' of null

我希望通过JavaScript来启动模态框，而不是使用data-attribute，希望这样可以更好地连接回父窗口：

jQuery

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

没有这样的运气。

- Damon

3

你没有在“窗口”之间传递数据。你的模态框和启动模态框的位置是同一个文档的一部分。你只需要使用简单的选择器引用要插入内容的元素，例如 $(#mytable').html()。 - Pero P.

1

就是这样 - 我让它变得太困难了。 - Damon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MattD · Accepted Answer

您可以通过您的模态框访问的任何信息也可以添加到您的页面中。

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

这个示例应该说明，模态框中设置的任何项目都可以用来设置生成该模态框的页面上的项目。 页面可以访问的任何元素或变量，您的模态框也可以访问。