jquery-ui-dialog – How to hook into dialog close event

jquery-ui-dialog – How to hook into dialog close event

I am using the jquery-ui-dialog plugin
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.

Solutions/Answers:

Solution 1:

I have found it!

You can catch the close event using the following code:

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

Obviously I can replace the alert with whatever I need to do.
Edit: As of Jquery 1.7, the bind() has become on()

Solution 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,
    position: ["center", 200],
    close: CloseFunction,
    overlay: {
        opacity: 0.5,
        background: "black"
    }
});

Note close: CloseFunction

Solution 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');
}**
});

Solution 4:

$( "#dialogueForm" ).dialog({
              autoOpen: false,
              height: "auto",
              width: "auto",
              modal: true,
                my: "center",
                at: "center",
                of: window,
              close : function(){
                  // functionality goes here
              }  
              });

“close” property of dialog gives the close event for the same.

Related:  Rails 3.1 Sprockets require directives - is there a way to exclude particular files?

Solution 5:

U can also try this

$("#dialog").dialog({
            autoOpen: false,
            resizable: true,
            height: 400,
            width: 150,
            position: 'center',
            title: 'Term Sheet',
            beforeClose: function(event, ui) { 
               console.log('Event Fire');
            },
            modal: true,
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });

Solution 6:

This is what worked for me…

$('#dialog').live("dialogclose", function(){
   //code to run on dialog close
});