Question

给出以下脚本：

$(function () {
    $(".editLink").button();

    $('#editPersonDialog').dialog({
        autoOpen: false,
        width: 800,
        resizable: false,
        title: 'Edit Person',
        modal: true,
        buttons: {
            "Save": function () {
                $("#update-message").html('');
                $("#updatePersonForm").submit();
            },
            "Close": function () {
                $(this).dialog('close');
            }
        },
        close: function (event, ui) {
            $(this).dialog('close');
        }
    });

    $(".editLink").click(function () {
        var dialogDiv = $('#editPersonDialog');
        var linkObj = $(this);
        var viewUrl = linkObj.attr('href');
        $.get(viewUrl, function (data) {
            dialogDiv.html(data);
            //validation
            var $form = $("#updatePersonForm");
            // unbind existing validation
            $form.unbind();
            $form.data("validator", null);
            // check document for changes
            $.validator.unobtrusive.parse(document);
            // re-add validation with changes
            $form.validate($form.data("unobtrusiveValidation").options);
            // open dialog
            dialogDiv.dialog('open');
        });

        return false;
    });
});

function updateSuccess() {
    if ($("#update-message").html() == "True") {
        $('#editPersonDialog').dialog('close');
        $("#commonMessage").html("Update Complete");
        $("#commonMessage").delay(400).slideDown(400).delay(3000).slideUp(400);
    }
    else {
        $("#update-message").show();
    }
}

如果单击对话框中的“X”按钮，表单将正常关闭。如果我单击“关闭”按钮，则它不会关闭。我已经验证正在调用“关闭”按钮的代码。

“X”按钮和“关闭”按钮都运行相同的语句：'$（this）.dialog（'close'）;'。为什么一个工作而另一个不工作？

除此之外，除非我刷新页面，否则对话框不会再次打开。我想这两个问题可能是相关的。

我发现很多人有类似的问题和许多不同的解决方案。不幸的是，他们都没有为我工作。

进一步信息：

该对话框以Ajax格式显示部分视图：

@using (Ajax.BeginForm("Edit", "Person", null,
    new AjaxOptions
    {
        UpdateTargetId = "update-message",
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "POST",
        OnSuccess = "updateSuccess"
    },
    new { @id = "updatePersonForm" }))
{
    @Html.ValidationSummary(true)
    <div id="update-message"  class="hiddenDiv"></div>
    <div class="blockGraygradient">
        @Html.Partial("_CreateEditCommon")
        @Html.HiddenFor(model => model.SelectedPerson.Id)
        @Html.HiddenFor(model => model.SelectedPerson.RowVersion)
        @Html.HiddenFor(model => model.SelectedPerson.CreateTime)
    </div><p/>
}

Answer 1

请尝试使用此功能。

$(this).dialog('destroy');

我们遇到了完全相同的问题。最后，每次重新打开对话框时，实际上都会将对话框标记重新注入DOM。然后，当您单击关闭（第二次）时，它仅关闭对话框的第一次出现，但不一定是打开的对话框。您可以使用运行时DOM检查器（如FireBug或Chrome的内置开发人员工具）进行检查。

Answer 2

我发现两个问题的原因（关闭按钮无法正常工作并且无法在不刷新页面的情况下多次显示对话框）是因为我在主页和我的主页中都包含了对脚本文件的引用对话框显示部分视图。一旦我从局部视图中删除了脚本引用，问题就消失了。

（顺便说一下，当关闭对话框时，现在又引发了另一个问题，就是将Ajax更新回到主页面上。我认为这就是我首先将脚本放入局部视图的原因）

Answer 3

你有太多的递归。您无需订阅jQuery对话框的close事件并在其中调用$(this).dialog('close');。只需对此行发表评论或完全删除close事件订阅：

$('#editPersonDialog').dialog({
    autoOpen: false,
    width: 800,
    resizable: false,
    title: 'Edit Person',
    modal: true,
    buttons: {
        "Save": function () {
            $("#update-message").html('');
            $("#updatePersonForm").submit();
        },
        "Close": function () {
            $(this).dialog('close');
        }
    }
});

jQuery UI对话框不会关闭

3 个答案: