Ajax Modal 只工作一次

Question

I have an MVC application that uses a modal form to collect user information.我有一个 MVC 应用程序，它使用模态表单来收集用户信息。 There is a primary view with a dataTable, and each row in the dataTable renders a button that I use to render a partial view content inside the modal dialog.有一个带有 dataTable 的主视图，dataTable 中的每一行都呈现一个按钮，我用它来呈现模式对话框内的部分视图内容。 After a submission, the modal is supposed to disappear, so that the user could click on the same button or any other if they wanted to.提交后，模态应该消失，以便用户可以单击相同的按钮或任何其他按钮（如果他们愿意）。

The problem I am having is that the buttons only click once.我遇到的问题是按钮只点击一次。 Specifically, when I click on one of the buttons, the form opens as expected and I can submit the changes to the database;具体来说，当我单击其中一个按钮时，表单会按预期打开，我可以将更改提交到数据库； that works no problem.没问题。 After that, all of the buttons on that page do not do anything when I click on them.之后，当我单击该页面上的所有按钮时，它们都不会执行任何操作。

Any ideas on what I can do to fix this issue?关于我可以做些什么来解决这个问题的任何想法？

Here is my code:这是我的代码：

ORIGINAL VIEW:原图：

<html>
    <head></head>
    <body>
        <table id="NewCounterpartyRequests" class="display">
                    <thead>
                    <tr>                        
                        <th>Counterparty Legal Name</th>
                        <th>Requestor</th>
                        <th>View Details</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Counterparty Legal Name</th>
                        <th>Requestor</th>
                    </tr>
                </tfoot>
                <tbody></tbody>
        </table>
    </body>
</html>

<div id='dialogDiv' class='modal fade in'>
    <div id='dialogContent'></div>
</div>

PARTIAL VIEW局部视图

<div id="dialogDiv" class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Counterparty Request Details</h3>
    </div>

@using (Ajax.BeginForm("EditNewFullCounterpartyRequestDetails", "Counterparty",
        new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "dialogDiv",
            HttpMethod = "POST",
            OnSuccess = "ShowSuccess"
        }))
{
<div>
        @Html.ValidationSummary()
        @Html.HiddenFor(x => x.RequestDetails.CounterpartyRequestId)
        @Html.HiddenFor(x => x.RequestDetails.CreatorUserId)
        @Html.EditorFor(x => x.RequestDetails.CounterpartyLegalName)

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary" type="submit">Save</button>
        </div>
}

CONTROLLER:控制器：

    [HttpGet]
    public ActionResult GetNewFullCounterpartyRequestDetails(int counterpartyRequestId)
    {
        FullCounterpartyRequestViewModel model = unitOfService.CreateFullCounterpartyRequestViewModel(counterpartyRequestId);
        model.ViewMode = "NEW";
        return PartialView("DisplayCounterpartyRequestPartial",model);
    }

    [HttpPost]
    public ActionResult EditNewFullCounterpartyRequestDetails(FullCounterpartyRequestViewModel model)
    {
        if(ModelState.IsValid)
        {
            //code to update the database
            return Json(new { success = true });
        }
        else
        {
            return PartialView("DisplayCounterpartyRequestPartial", model);
        }
    }

JAVASCRIPT爪哇脚本

function ShowSuccess(result) {
    if (!result.success) {
        $('#dialogDiv').html(result);
    } else {
        alert('Thanks for submitting');
        $('#dialogDiv').modal('hide');
    }
};

$('.modal-dialog').on('show.bs.modal', function () {
    $(this).find('.modal-body').css({
        'max-height':'100%'
    })});

$(function () {
    $.ajaxSetup({ cache: false });

    $('#NewCounterpartyRequests').on('click', '.ViewRequest', function (event) {
        var id = $(event.target).attr("data-id");
        var url = 'Counterparty/GetNewFullCounterpartyRequestDetails?counterpartyRequestId=' + id;
        $('#dialogContent').load(url, function () {
            $('#dialogDiv').modal('show');
        });
        return false;
    });
});

$(document).ready(function () {
    // Setup - add a text input to each footer cell
    $('#NewCounterpartyRequests tfoot th').each(function () {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
    });

    //create a DataTable
    var table = $('#NewCounterpartyRequests').DataTable({
    "bServerSide": true,
    "sAjaxSource": "Counterparty/DisplayNewCounterpartyRequests",
    "bProcessing": true,
    "aoColumns": [
                    { "sName": "COUNTERPARTYLEGALNAME" },
                    { "sName": "REQUESTOR" },
                    {
                        "sName": "DETAILS",
                        "bSearchable": false,
                        "bSortable": false,
                        "mRender": function (data, type, full) {
                            var id = full[2];
                            return '<button class="ViewRequest" data-id=' + id + '>View Details</button>';
                        }
                    }
    ]
    });

    // Apply the search
    table.columns().every(function () {
        var that = this;

        $('input', this.footer()).on('keyup change', function () {
            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }
        });
    });
});

Answer 1

I figured this out;我想通了； essentially what was happening is that the .load method was targeting the dialogContent element, which gets wiped out when you load the partial view.基本上发生的事情是 .load 方法针对 dialogContent 元素，当您加载部分视图时，该元素会被清除。 As a result, I just changed that load method to load directly the dialogDiv element and simply removed the dialogContent element entirely.因此，我只是将加载方法更改为直接加载 dialogDiv 元素，并简单地完全删除了 dialogContent 元素。 This now works.这现在有效。

Ajax Modal 只工作一次

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-09-28 16:34:20

Ajax Modal 只工作一次

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-09-28 16:34:20

解决方案1
0 已采纳 2016-09-28 16:34:20