title: jQuery UI Dialog Will Not Close
body: <p>Given the following script:</p>
  
  <pre><code>$(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();
      }
  }
  </code></pre>
  
  <p>If I click the "X" button on the dialog the form closes fine.  If I click the "Close" button then it does not close.  I have verified that the code for the "Close" button is being called.  </p>
  
  <p>Both the "X" button and the "Close" button are both running the same statement:  '$(this).dialog('close');'.  Why would one work and the other not work?  </p>
  
  <p>As an aside the dialog will not open a second time unless I refresh the page.  I imagine that these 2 problems may be related.</p>
  
  <p>I have found many people with similar problems and a number of different solutions that worked for them.  Unfortunately none of them worked for me.</p>
  
  <p>Further Info:</p>
  
  <p>The dialog displays a partial view in an Ajax form:</p>
  
  <pre><code>@using (Ajax.BeginForm("Edit", "Person", null,
      new AjaxOptions
      {
          UpdateTargetId = "update-message",
          InsertionMode = InsertionMode.Replace,
          HttpMethod = "POST",
          OnSuccess = "updateSuccess"
      },
      new { @id = "updatePersonForm" }))
  {
      @Html.ValidationSummary(true)
      &lt;div id="update-message"  class="hiddenDiv"&gt;&lt;/div&gt;
      &lt;div class="blockGraygradient"&gt;
          @Html.Partial("_CreateEditCommon")
          @Html.HiddenFor(model =&gt; model.SelectedPerson.Id)
          @Html.HiddenFor(model =&gt; model.SelectedPerson.RowVersion)
          @Html.HiddenFor(model =&gt; model.SelectedPerson.CreateTime)
      &lt;/div&gt;&lt;p/&gt;
  }
  </code></pre>