CODEWITHSUNDEEP
jqueryjquery-uieventsjquery-ui-dialog
sadmicrowave
sadmicrowave

Reputation: 40912

jQuery Dialog UI can't detect if close icon is clicked

I have a dialog modal box using jQuery's Dialog UI plugin. I'm trying to detect if the user closed the box using the 'X' button in the upper-right corner of the titlebar but have had no luck. I've tried:

$('.myModal').dialog({
    title: 'dialog 1',
    beforeClose: function(){
        //do something
    }
}).dialog("open");

This will execute the function regardless of user action. i.e. if the user clicks "OK" instead of the 'X' button.

I've looked through the dialog documentation and can't find an event, method, or option that gives me the results I'm looking for. Any ideas would be much appreciated.

Upvotes: 0

Views: 9172

Answers (5)

Shathur
Shathur

Reputation: 1525

I solved it by checking that the originalevent had an originalevent of type click. The condition is pretty long, but it works.

$('.myModal').dialog({
    title: 'dialog 1',
    beforeClose: function(){
        if (e.originalEvent && e.originalEvent.originalEvent && e.originalEvent.originalEvent.type == "click") {
            // do something
        }
    }
}).dialog("open");

Upvotes: 0

Andrewiski
Andrewiski

Reputation: 21

This assumes you havn't changed the default close text which displays as an X but innertext is 'close' 

$('#acceptsignaturediv').dialog({
             title: 'my Title',
             height: 400,
             width: 400,
             buttons: { "Accept": function () { alert('Accept'); },
                 "Decline": function () { alert('Decline'); }
             },
             beforeClose: function (event, ui) { if (event.originalEvent != undefined && event.originalEvent.srcElement.innerText == "close") { alert('You must accept or decline'); return false; } }
         });

Upvotes: 2

bdparrish
bdparrish

Reputation: 2764

Check out this link...

http://forum.jquery.com/topic/jquery-dialog-close

The fourth reply down is the one you are looking for, and more less he references this link.

http://jsbin.com/obafo

... where he has setup an example to view, which has this code ...

$("#dialog").dialog({

close: function(event, ui) {

    if ( event.originalEvent && 
                $(event.originalEvent.target).closest(".ui-dialog-titlebar-close").length ) {

        $("body").append("do some  stuff<br>");

    }

}

})
.find("button")
.click(function() {

    $("body").append("just close  dialog<br>");

    $(this).closest(".ui-dialog-content").dialog("close");

});

Upvotes: 8

Code Maverick
Code Maverick

Reputation: 20415

You could attach a handler to the click event of the close button:

$('.myModal')
    .dialog("widget")
    .find(".ui-dialog-titlebar-close").click(function() {

        // do whatever you want here

    });

Upvotes: 2

Teddy
Teddy

Reputation: 18572

You need to include the two optional arguments for the beforeClose callback function.

$('.myModal').dialog({title: 'dialog 1'
                  beforeClose: function(event,ui){ //do something }}).dialog("open");

You need to check the event and/or ui variables and figure out if the 'X' was pressed or not.

Upvotes: 3

Related Questions