Ajax 请求成功后关闭引导模式表单答案

【问题标题】：Closing Bootstrap Modal form after a Successful Ajax RequestAjax 请求成功后关闭引导模式表单
【发布时间】：2015-12-29 05:12:38
【问题描述】：

我的模态表单成功发出 Ajax 请求。接收到的数据显示在后台。调用模式是由 data-* 属性完成的，引导示例显示here。但是模态并没有被解雇。我尝试添加

OnSuccess = "$('#searchForm').modal('hide');"

到我的 Ajax.BeginForm。但这并没有消除模态在背景上投射的淡入淡出效果。

我的观点是：

<div class="modal fade" id="searchForm" tabindex="-1" role="dialog" aria-labelledby="searchFormLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="searchFormLabel">Search Here</h4>
            </div>
            <div class="modal-body">
                @using (Ajax.BeginForm(new AjaxOptions
                {
                    HttpMethod = "GET",
                    InsertionMode = InsertionMode.Replace,
                    UpdateTargetId = "results",
                    OnSuccess = "$('#searchForm').modal('hide');"
                }))
                {
                    // input fields and submit button are here
                }
            </div>

           </div>
    </div>
</div>

我错过了什么吗？

【问题讨论】：

在$('#searchForm').modal('hide'); 之后添加此$('.modal-backdrop').hide();。看看它是否有效。
@Alorika 它可以工作，但是下次您尝试打开模式时，它会立即被关闭。
这可能是由于事件冒泡而发生的。所以你可以尝试在$('#searchForm').modal('hide'); 之后添加e.stopPropagation()。看看这个解决方案是否适合你。
对不起。我试过： OnSuccess = "$('#searchForm').modal('hide'); $('.modal-backdrop').hide(); e.stopPropagation();"它没有用。
看到它不起作用，因为在这种情况下e 将是未定义的。您需要在OnSuccess 上指定一个函数，例如OnSuccess="callMyfunction"。然后在那个函数（function callMyFunction(e)）中输入这个$('#searchForm').modal('hide');e.stopPropagation();。试试这个方法。

标签： ajax asp.net-mvc twitter-bootstrap-3

【解决方案1】：

在这种情况下，您将通过data-attributes 打开modal，然后使用jQuery 将其关闭。因此，在某种程度上，两种模式切换方法都被使用，它们是相互冲突的。因此，删除数据属性并仅使用 jQuery 显示/隐藏modal。

试试这个：

$('#searchForm').modal('show'); //for showing the modal

在 OnSuccess 上隐藏：

OnSuccess = "unloadModal"

函数unloadModal 将是：

function unloadModal() {
    $('#searchForm').modal('hide');
};

【讨论】：

对我也有帮助:)
@MazdakShojaie- 很高兴它也帮助了你 :)

【解决方案2】：

我的场景：通过MVC局部视图提供Bootstrap模式的内容，并在其中使用Ajax POST-call。在 ajax 调用完成后自动关闭模式解决了我的问题是 OnComplete/OnSuccess 处理程序函数中调用的一个小“组合”：

function onAjaxCompleted()
{
    $('#searchForm.close').click(); 
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();
}

希望这对您也有帮助。

【讨论】：