Диалог jQueryUI с формой Ajax не будет закрываться с помощью $ (this) .dialog ("close");

Question

У меня есть диалоговое окно jQueryUI, загружающее форму из внешнего URL-адреса, форма отображается нормально и отправляет сообщения в порядке, но ни одна из кнопок сохранения или отмены, похоже, не закрывает форму, хотя значок закрытия диалогового окна хорошо работает.

Вот мой скрипт, который порождает диалог и должен обрабатывать кнопки:

  $(function () {
      $('a.modal').on('click', function() {
          var href = $(this).attr('href');
          $("#modalAdd").html("")
              .dialog({
                  title: $(this).attr("title"),
                  width: 400,
                  height: 300,
                  buttons: {
                      "Save": function() {
                          $.post(href,
                              $("form").serialize(),
                              function() {
                                  $(this).dialog("close");
                              });
                      },
                      Cancel: function() {
                          $(this).dialog("close");
                      }
                  }
              })
              .load(href, function() {
                  $(this).dialog("open");
              });

          return false;
      });
  });

Окончательное решение состояло в том, чтобы объявить переменную вне области объявления диалога следующим образом:

 $(function () {
      $('a.modal').on('click', function() {
          var href = $(this).attr('href');
          var modal = $("#modalAdd");
          modal.html("")
              .dialog({
                  title: $(this).attr("title"),
                  width: 400,
                  height: 300,
                  buttons: {
                      "Save": function() {
                          $.post(href,
                              $("form").serialize(),
                              function() {
                                  modal.dialog("close");
                              });
                      },
                      Cancel: function() {
                          modal.dialog("close");
                      }
                  }
              })
              .load(href, function() {
                  **modal**.dialog("open");
              });

          return false;
      });
  });

Answer 1

Это связано с переменной областью действия: как только вы запускаете функцию обратного вызова для вызова $.post, this больше не является диалоговым окном. Попробуйте позвонить $("#modalAdd").dialog('close');.

Если вы не возражаете против расширения вызовов $.post() и $.load(), вы можете установить контекст this для определенного элемента, используя полный метод $.ajax(). См. Параметр «context» в документации .

Answer 2

this изменяется в функции обратного вызова ajax, вам нужно кэшировать локальную переменную.

"Save": function () {
    var $this = $(this);
    $.post(href, $("form").serialize(), function () {
        $this.dialog("close");
    });
},