JQuery UI диалоговое окно не закрывается

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

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

(В стороне это привело к тому, что снова возникла проблема с обновлением 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'); 
     } 
    } 
});