194

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.

11 Answers 11

255

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

7
  • 3
    typo: $('div#popup_content').bind('dialogclose', function(event)) { ... } Commented Mar 26, 2010 at 15:56
  • 1
    This is helpful but is $('div#popup_content') right? What should I be replacing this with, bearing in mind my dialog is opened like this jQuery.fn.dialog.open({})
    – Jake N
    Commented Oct 18, 2011 at 9:05
  • I see the dialog closes first and then the alert appears, if it is same situation to everyone, can someone help me so that alert appears first and then on click of OK then the window closes? Correct me....
    – changeme
    Commented Jul 10, 2012 at 17:12
  • 5
    This should be updated to use on() instead of bind() which is now obsolete.
    – RBZ
    Commented Mar 20, 2014 at 19:37
  • 2
    Keep in mind that if a jQuery UI Dialog has never been opened before on a page, then the overlay div won't exist in the DOM. Hence, you may consider doing something like this instead: $('body').on('dialogclose', '.ui-dialog', function(){...});
    – thdoan
    Commented Oct 16, 2015 at 4:32
203

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

7
  • 11
    This answer seems more correct to me than the accepted answer. Also, the correct API documentation can be found here: api.jqueryui.com/dialog/#event-close Commented Aug 15, 2013 at 21:31
  • 2
    Jake N - You need to actually write a function accessible to the dialog called 'CloseFunction' for this to work, for example just above you could write var CloseFunction = function() { //Do your custom closing stuff here }; Commented Jul 24, 2014 at 18:01
  • This is an option but at time the code is being used in different places. The selected answer works for when you want to add different behavior in different contexts and reuse the dialog creation code to get standardization. Commented Sep 26, 2014 at 17:13
  • You have overlay twice. That isn't nessesary right?
    – radbyx
    Commented Oct 28, 2015 at 10:15
  • 1
    This works and is definitely a needed and useful answer here, but it also runs the CloseFunction code any time the dialog is closed by any means, not just when closed with the X or something. So if you want to run certain code when the dialog is closed with the X or the Cancel button, but not when it's closed by something else happening (like in my case when a submitted input is validated as correct), then this won't work.
    – Michael K
    Commented Sep 14, 2016 at 18:25
33
$("#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');
    }
});
22
$( "#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.

16

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

This is what worked for me...

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

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.  
});
3
  • The OP's answer is basically identical Commented Dec 1, 2020 at 18:14
  • @reggaeguitar true. OP updated the answer to on() in 2015 :)
    – Disper
    Commented Dec 2, 2020 at 19:22
  • I wasn't aware they updated theirs after yours, I'll change my downvote to an upvote if you edit your answer Commented Dec 2, 2020 at 22:25
6

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

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

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.

1
  • Hey andy. I amusing the the dialog from jquery-ui which is made via css and javascript. From looking at the code I think there's a hook in there for me but I don't know how to get to it.
    – Brownie
    Commented Oct 5, 2008 at 13:20
2

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();
});
1
  • 1
    Just use .on() -- instead of .live() or .bind()
    – cssyphus
    Commented May 15, 2013 at 18:45
0

In my case popup dialogue is called on a button click like this and I attach close button events with timeout:

DialogBoxShareDesign();
setTimeout(clsBtnFunc(),1000);

function clsBtnFunc() {
    $("[aria-describedby='dialog-loginregister'] .csdialog-cancel").click(function (el) {
        alert('close by cancel button');
    });

    $("[aria-describedby='dialog-loginregister'] .ui-dialog-titlebar-close").click(function (el) {
        alert('close by x button');
    });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.