Hook into dialog close event

Question

I am using the dialog from jquery-ui.

I am looking for way to refresh the page when in some circumstances when the dialog is closed.

Is there a way to capture a close event from the dialog?

I know I can run code when the close button is clicked but that doesn't cover the user closing with escape or the x in the top right corner.

Answer 1

I have found it!

You can catch the close event using the following code:

 $('div#popup_content').bind('dialogclose', function(event) {
     alert('closed');
 });

Obviously I can replace the alert with whatever I need to do.

Answer 2

I believe you can also do it while creating the dialog (copied from a project I did):

dialog = $('#dialog').dialog({
    modal: true,
    autoOpen: false,
    width: 700,
    height: 500,
    minWidth: 700,
    minHeight: 500,
    overlay: true,
    position: ["center", 200],
    close: CloseFunction,
    overlay: {
        opacity: 0.5,
        background: "black"
    }
});

Note close: CloseFunction

Answer 3

$("#dialog").dialog({ autoOpen: false, resizable: false, width: 400, height: 140, modal: true, buttons: { "SUBMIT": function() { $("form").submit(); }, "CANCEL": function() { $(this).dialog("close"); } }, close: function() { alert('close'); } });

Answer 4

Can't seem to make the below work for me

function clearForm(form) {
      // iterate over all of the inputs for the form
      // element that was passed in
      $(':input', form).each(function() {
     var type = this.type;
     var tag = this.tagName.toLowerCase(); // normalize case
     // it's ok to reset the value attr of text inputs,
     // password inputs, and textareas
     if (type == 'text' || type == 'password' || tag == 'textarea')
       this.value = "";
     // checkboxes and radios need to have their checked state cleared
     // but should *not* have their 'value' changed
     /*else if (type == 'checkbox' || type == 'radio')
       this.checked = false; */
     // select elements need to have their 'selectedIndex' property set to -1
     // (this works for both single and multiple select elements)
     else if (tag == 'select')
       this.selectedIndex = -1;
      });
    };


$("#formBox").bind('dialogclose', function(event)
{
clearForm("#calcQuery");
});