如何在bootstrap模式之外更新div

时间:2013-10-18 14:18:49

标签: twitter-bootstrap modal-dialog

我有一个页面调用带有外部内容的bootstrap模态窗口。模态窗口由一个表单组成。表单使用jquery验证,我正在尝试使用ajax提交处理程序。问题是,我似乎无法访问我想要更新的主要div。模态窗口使用自己的html页面。我想更新用于调用模态窗口的div,这可能是这样吗?

没有代码,除非您希望我发布以更好地澄清。希望我想做的事情有道理。

编辑:[主页面是我想从模式中的ajax调用更新的内容]

[Main Page]
<div id='div-id-want-to-update-on-submit'></div>

<a href='/some-external-form' data-toggle='modal' data-target='#my-modal'>Launch Modal</a>

[Modal Window]
<div id="my-modal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <form action=/post-somewhere>
...
    </form>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<script type="text/javascript">
... some jquery  to validate and ajax call to another method.

    var request;
    request = $.ajax({
        url: '/post-method/returns-html',
        type: "post",
        data: serializedData
     });

    request.done(function (response, textStatus, jqXHR) {
        $('#div-id-want-to-update-on-submit').html(response);
    });
</script>

[edit2] - 忽略这一点,我在更新div中做了一个愚蠢的类型。如下所示,不需要window.opener,DOM可从主页面获得。

1 个答案:

答案 0 :(得分:0)

您应该可以使用window.opener.document

引用开始文档

e.g。

request.done(function (response, textStatus, jqXHR) {
    $(window.opener.document).find('#div-id-want-to-update-on-submit').html(response);
});