是否可以在不使用加载调用的情况下将表单绑定到模态 bootstrap window？

Question

我正在使用 ajax 发出请求，然后打开模式 bootstrap window。问题是，当我使用 ajax 时，我向我的控制器发出请求，我加载的 return（模式内容）如下：

//modal loading
$('#contentModalFinanceiroParcela').html(data);

//exibição da modal
$('#modalFinanceiroParcela').modal({
    keyboard: true,
}, 'show');

到目前为止，一切都很完美。问题是，从此以后，我就不能绑定表单去注册表单的提交事件了。在函数 bindFormFinanceiroParcela 中，无论我通过多少“对话框”，绑定都不起作用。

bindFormFinanceiroParcela(document.getElementById("contentModalFinanceiroParcela"));

搜索论坛，我发现如果我使用“加载”命令加载模态，该过程会正常工作，如下所示，但我不能那样做，否则它会向控制器发出第二个请求，因为之前，我已经使用了 ajax .

//That way it works, but I can't use it.
$('#contentModalFinanceiroParcela').load(url, function () {
    $('#modalFinanceiroParcela').modal({
        keyboard: true
    }, 'show');

    // Inscreve o evento submit
    bindFormFinanceiroParcela(this);

    stopLoadPage();
});

是否可以不使用上面脚本中提到的“加载”命令来绑定表单？

    function openModalFinanceiroParcelaSemURL(data) {
    startLoadPage();

    //Create the modal window block in the body of the page
    if (!$("#modalFinanceiroParcela").data('bs.modal'))
        CreateModalFinanceiroParcela();

    //Load modal content via ajax request
    $('#contentModalFinanceiroParcela').html(data);

    $('#modalFinanceiroParcela').modal({
        keyboard: true,
    }, 'show');

   bindFormFinanceiroParcela(document.getElementById("contentModalFinanceiroParcela"));

   
    
    stopLoadPage();
}

function bindFormFinanceiroParcela(dialog) {
$('form', dialog).submit(function (e, i) {
    if ($(this).valid() || i) {
        startLoadOneMoment();
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                if (result.success) {
                     window.location = window.location;                       
                } else {
                    $('#contentModalFinanceiroParcela').html(result);
                    bindFormFinanceiroParcela();
                }
                stopLoadOneMoment();
            }
        });
        return false;
    } else {
        return false;
    }
});

function CreateModalFinanceiroParcela() {
var html = '<div class="modal modal-primary modal-system" tabindex="-1" role="dialog" id="modalFinanceiroParcela" data-backdrop="static"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="content-modal-system" id="contentModalFinanceiroParcela"></div></div></div></div>';

$("body").append(html);
}

RAZOR 删除：

@using Retaguarda.Domain.Enuns
@model Retaguarda.Application.ViewModels.Financeiro.FinanceiroParcela.FinanceiroParcelaViewModel
@{
    ViewData["Title"] = "Excluir Parcela";
    Layout = null;
}
<div>
    <form asp-action="Delete" id="frm-excluir-financeiro-parcela">
        @Html.AntiForgeryToken()

        <div class="modal-shadow">
            <div class="modal-header modal-header-primary">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4><i class="modal-title text-center glyphicon glyphicon-trash"></i> @ViewData["Title"] </h4>
            </div>
            <div class="panel">
                <div class="panel-body  container-fluid pt-15 pl-15 pr-15">
                    <div class="form-horizontal">
                        <vc:summary />
                        <br />
                        <div class="message-delete">
                            @Html.HiddenFor(model => model.Id, new { id = "hid-financeiro-parcela-id" })
                            <i class="icon fa-trash" aria-hidden="true"></i>
                            <p>
                                Tem certeza de que deseja excluir a parcela @(Model.Parcela)?<br />
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <div class="col-md-offset-2 col-md-10">
                    <div class="float-right">
                        <div class="btn-group btn-group-sm mr-auto"
                             role="group">
                            <div class="btn-group btn-group-sm" role="group">
                                @*<button id="btn-excluir-financeiro-parcela" type="submit" class="btn btn-success"><i class="icon wb-check"></i> Excluir </button>*@
                                <button id="btn-excluir-financeiro-parcela" type="button" class="btn btn-success"><i class="icon wb-check"></i> Excluir </button>
                                <button id="btn-cancelar-financeiro-parcela" class="btn btn-danger" data-dismiss="modal"><i class="icon wb-close"></i> Cancelar </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Ajax 通话

$('#dtFinanceiroParcela').on('click', 'tr .btn-excluir-financeiro-parcela', function (e) {
e.preventDefault();

startLoadOneMoment();

var id = $(this).attr('data-id');
var data = { id: id };
var dataURL = jQuery.param(data);

$.ajax({
    url: "/financeiro-parcela-gerenciar/remover-financeiro-parcela/" + id,
    type: "GET",
   // data: dataURL,
    contentType: "application/json",
    async: false,
    success: function (result) {
        if (typeof result.success !== 'undefined') {
            if (!result.success) {
                stopLoadOneMoment();

                swal("Oops", result.message, "error");

                return false;
            }
        }
       // alert(this.url);
        stopLoadOneMoment();
        openModalFinanceiroParcelaSemURL(result);
        
        return false;
    },
    error: function () {
        stopLoadOneMoment();
        alert("Oops! Algo deu errado.");
        return false;
    }
});

Answer 1

您在 razor 中的表单不包含任何提交按钮，因为它被注释掉了。

@*<button id="btn-excluir-financeiro-parcela" type="submit" class="btn btn-success"><i class="icon wb-check"></i> Excluir </button>*@

删除评论或将另一个按钮的类型更改为“提交”

我想提交事件已成功附加，但由于您的表单中缺少提交按钮而从未调用过。

是否可以在不使用加载调用的情况下将表单绑定到模态 bootstrap window？

Is there a possibility to bind the Form to a modal bootstrap window without using the load call?

javascript

ajax

jquery

modal-dialog

bootstrap-modal