解散并提交表格Bootstrap 3 [英] Dismiss and submit form Bootstrap 3

问题描述

我有一个表单内的bootstrap模式对话框。表单通过AJAX提交。我希望提交按钮也可以解除模态（否则我最终会保留模态叠加）

I have a bootstrap modal dialog that is inside a form. The form is submitted via AJAX. I want the submit button to also dismiss the modal (otherwise i end up with the modal overlay remaining)

代码对于模态是：

@using (Ajax.BeginForm("SaveConfiguredReport", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "report-details", OnBegin="preProcessing" }))
{
    <div class="modal fade" id="add-filter-dialog" tabindex="-1" role="dialog" aria-labelledby="add-filter-dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Add a Filter</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>

                <div class="modal-body">
                    <p>Adding filters allows you to sort what data will be included in the report. These filters will be default for all ongoing usage of this report.</p>
                    <div id="field-templates"></div>
                    <input type="hidden" id="field-template-id" name="FieldTemplateID" />

                    @Html.DropDownList("OperatorID", Model.Operators.Select(x => new SelectListItem { Text = x.Name, Value = x.OperatorID.ToString() }))

                    <input type="text" name="FilterValue" class="typeahead" id="filter-value" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success" data-dismiss="modal" name="Command" value="Add">Add Filter</button>
                </div>
            </div>
        </div>
    </div>
}
<!-- other code -->
<script>
    function preProcessing() {
        $('.modal').each(function (index, element) {
            $(element).modal('hide');
        });
    }
</script>

如果我保留 data-dismiss 属性在提交按钮上，它将关闭表单但不提交。如果我将其删除，表格将被提交但不会被驳回。有人有运气吗？

If i keep the data-dismiss attribute on the submit button, it will dismiss the form but not submit it. If i remove it, the form will be submitted but not dismissed. Anyone had any luck with this?

编辑

我在AJAX调用中添加了一个预处理器，以便在开始时隐藏所有表单。最后隐藏它们是行不通的，因为表单正在替换模态而不是叠加层。这是一个解决方法，直到建议正确的解决方案

EDIT
I have added a pre-processor to the AJAX call to hide all forms at the start. Hiding them at the end did not work because the form was replacing the modal but not the overlay. This is a workaround until a proper solution is suggested

推荐答案

我通常做的是在表单验证后通过Javascript关闭它和AJAX post / get成功。

What I usually do is close it via Javascript after the form has been validated and AJAX post/get was successful.

$('#add-filter-dialog').modal('hide');

在此处查看更多选项 http://getbootstrap.com/javascript/#modals-usage

这篇关于解散并提交表格Bootstrap 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！