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.

score 255 · Accepted Answer · edited May 31 '15 at 20:20

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

edited May 31 '15 at 20:20

programmers5

326
2
13

answered Oct 05 '08 at 13:42

Brownie

7,688
5
27
39

3

typo: $('div#popup_content').bind('dialogclose', function(event)) { ... } – CFNinja Mar 26 '10 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 Oct 18 '11 at 09: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 Jul 10 '12 at 17:12
I keep getting "ReferenceError: event is not defined". How should I define event? – socialMatrix Oct 25 '12 at 17:38
5

This should be updated to use on() instead of bind() which is now obsolete. – RBZ Mar 20 '14 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 Oct 16 '15 at 04:32
In case it's useful to others, the event will have an `eventPhase` property when closed with the X icon or Esc key. If you close programmatically (e.g. `$(...).dialog('close')`) that won't be present. This is one way to differentiate. – jinglesthula Oct 09 '19 at 20:44

Darryl Hein · Answer 2 · 2015-10-28T14:35:57.773

202

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

edited Oct 28 '15 at 14:35

answered Oct 05 '08 at 19:35

Darryl Hein

142,451
95
218
261

11

This answer seems more correct to me than the accepted answer. Also, the correct API documentation can be found here: http://api.jqueryui.com/dialog/#event-close – Chris Gillum Aug 15 '13 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 };` – Adam Diament Jul 24 '14 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. – Russell Ormes Sep 26 '14 at 17:13
You have `overlay` twice. That isn't nessesary right? – radbyx Oct 28 '15 at 10:15
I suppose not...since the first would override the second. I've removed it. – Darryl Hein Oct 28 '15 at 14:36
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 Sep 14 '16 at 18:25
I ended up using a workaround to set a data item for my dialog, which is a boolean flag set elsewhere, and I use that to determine whether my close code as in this answer should execute or not. To be explicit, the first thing after my close: is an if conditional that checks the data item. – Michael K Sep 14 '16 at 18:36

score 33 · Answer 3 · edited Dec 11 '19 at 16:24

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

edited Dec 11 '19 at 16:24

Jeff

2,835
3
41
69

answered Nov 10 '09 at 08:06

Mo Ming C

331
3
2

score 22 · Answer 4 · answered Jul 17 '14 at 08:43

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

score 16 · Answer 5 · answered Jun 20 '12 at 09:45

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

score 10 · Answer 6 · answered Jul 19 '11 at 17:59

10

This is what worked for me...

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

answered Jul 19 '11 at 17:59

morttan

101
1
2

score 8 · Answer 7 · answered Nov 10 '14 at 08:07

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.  
});

answered Nov 10 '14 at 08:07

Disper

725
12
28

The OP's answer is basically identical – reggaeguitar Dec 01 '20 at 18:14
@reggaeguitar true. OP updated the answer to on() in 2015 :) – Disper Dec 02 '20 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 – reggaeguitar Dec 02 '20 at 22:25

score 6 · Answer 8 · answered Nov 24 '16 at 10:57

6

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

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

answered Nov 24 '16 at 10:57

Mehdi Roostaeian

483
6
6

andy · Answer 9 · 2008-10-05T13:26:10.900

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.

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, Oct 05 '08 at 13:20

score 2 · Answer 10 · edited Feb 15 '12 at 14:41

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

edited Feb 15 '12 at 14:41

Cosmin

21,216
5
45
60

answered Jun 16 '11 at 11:56

Alexei

39
1

1

Just use .on() -- instead of .live() or .bind() – cssyphus May 15 '13 at 18:45

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

10 Answers10

Linked

Related