CODEWITHSUNDEEP
javascriptjqueryjquery-ui
ProNotion
ProNotion

Reputation: 3692

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

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

Upvotes: 1

Views: 1302

Answers (2)

xdazz
xdazz

Reputation: 160893

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");
    });
},

Upvotes: 1

Dunhamzzz
Dunhamzzz

Reputation: 14808

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.

Upvotes: 2

Related Questions