Диалог пользовательского интерфейса jQuery не будет закрыт

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 ');'.Почему один работает, а другой не работает?

Кроме того, диалоговое окно не откроется во второй раз, пока я не обновлю страницу.Я предполагаю, что эти 2 проблемы могут быть связаны.

Я нашел много людей с похожими проблемами и множеством различных решений, которые работали для них.К сожалению, ни один из них не помог мне.

Дополнительная информация:

В диалоговом окне отображается частичное представление в виде 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

Я обнаружил, что причина обеих проблем (кнопка закрытия не работает и не удается отобразить диалоговое окно более одного раза без обновления страницы) заключалась в том, что я включил ссылки на свои файлы сценариев как на главной странице, так и в частичный вид, отображаемый в диалоге. Как только я удалил ссылки на скрипты из частичного представления, проблемы исчезли.

(Помимо этого, теперь возникла еще одна проблема, связанная с обновлением Ajax на главной странице, когда диалоговое окно закрыто. Я думаю, что по этой причине я изначально поставил сценарии в частичное представление) .

Answer 2

Попробуйте использовать это вместо.

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

У нас была точно такая же проблема.В конце концов, каждый раз, когда вы снова открывали диалог, он фактически заново вставлял разметку диалога в DOM.Затем, когда вы нажимаете кнопку закрытия (во второй раз), он закрывает только первое вхождение диалога, но не обязательно того, которое открыто.Вы можете проверить это с помощью инспектора DOM во время выполнения, такого как FireBug или встроенные инструменты разработчика Chrome.

Answer 3

У вас слишком много рекурсии.Вам не нужно подписываться на событие close вашего диалогового окна jQuery и вызывать $(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');
        }
    }
});