how can i close my jquery ui dialog when i submit a form?

Question

i load a form into a jquery ui dialog. i have a submit button (inside my form - NOT the actual dialog buttons) that calls a controller action but i can't figure out how to close the dialog after the submit is called as i dont have any event handler that i am attaching.

is there anyway of doing this besides changing the submit to input type=button?

i know in jquery i can capture the submit

$('#positionForm').submit(function () {
    // do stuff
    return true;
});

but this seems to fire before submitting so i dont want to close the dialog yet.

is there anything wrong with the below code:

$('#positionForm').live('submit', function () {

    $.post('/MyController/Action', $("#positionForm").serialize(), function (data) {
            alert(data);
    }, "html");

    closeModalPopup();
    return false ;
});

Answer 1

For updated question: You can call the close code in the success callback, like this:

$('#positionForm').live('submit', function () {
  $.post('/MyController/Action', $(this).serialize(), function(data) {
    $('#positionForm').closest(".ui-dialog-content").dialog("close");
  }, "html");
  return false;
});

---

Original Answer: You can attach a form submit handler, for example:

$("#myform").submit(function() {
  $(this).closest(".ui-dialog-content").dialog("close");
});

You can give it a try here.