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

Question

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.

Answer 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()

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,
    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

$( "#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.

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

Answer 6

This is what worked for me...

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

Answer 7

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

Because no one actually created an answer with using .on() instead of bind() i decided to create one.

$('div#dialog').on('dialogclose', function(event) {
     //custom logic fired after dialog is closed.  
});

Answer 8

add option 'close' like under sample and do what you want inline function

close: function(e){
    //do something
}

Answer 9

If I'm understanding the type of window you're talking about, wouldn't $(window).unload() (for the dialog window) give you the hook you need?

(And if I misunderstood, and you're talking about a dialog box made via CSS rather than a pop-up browser window, then all the ways of closing that window are elements you could register click handers for.)

Edit: Ah, I see now you're talking about jquery-ui dialogs, which are made via CSS. You can hook the X which closes the window by registering a click handler for the element with the class ui-dialog-titlebar-close.

More useful, perhaps, is you tell you how to figure that out quickly. While displaying the dialog, just pop open FireBug and Inspect the elements that can close the window. You'll instantly see how they are defined and that gives you what you need to register the click handlers.

So to directly answer your question, I believe the answer is really "no" -- there's isn't a close event you can hook, but "yes" -- you can hook all the ways to close the dialog box fairly easily and get what you want.

Answer 10

You may try the following code for capturing the closing event for any item : page, dialog etc.

$("#dialog").live('pagehide', function(event, ui) {
      $(this).hide();
});