jQueryUI Dialog with Ajax Form Won't Close with $(this).dialog(“close”);

Question

I have a jQueryUI Dialog loading up a form from an external url, the form renders fine and posts ok but neither the save or cancel buttons seem to close the form yet the dialog close icon does it's job just fine.

Here is my script that spawns the dialog and should handle the buttons:

  $(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;
      });
  });

The final solution was to declare the variable outside of the scope of the dialog declaration as follows:

 $(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

It's because of variable scope, as soon as you start the call back function for the $.post call, this is no longer the dialog box. Try calling $("#modalAdd").dialog('close'); instead.

If you don't mind expanding your $.post() and $.load() calls, you can set the context of this to a certain element using the full $.ajax() method. See the "context" option in the docs .

Answer 2

this is changed in the ajax callback function, you need to cache to a local variable.

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