Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I detect that the (X) close button of a jQuery UI Dialog was clicked, separately from the dialogclose/dialogbeforeclose events?

I'd like to be able to detect the (x) close button of a jQuery UI Dialogue being clicked, but I don't want to use the dialogclose / dialogbeforeclose events (since I believe these will fire regardless of how the dialog was closed).

I tried $(".ui-dialog-titlebar-close").live("click"), but that doesn't seem to work.

How can I do this?

Sample code: (the debugger doesn't fire up when the dialogue is closed).

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>

  <script>
  $(document).ready(function() {
    $("#dialog").dialog();

    $(".ui-dialog-titlebar-close").live("click", function() { 
        debugger; // ** clicking the close button doesn't get to here.**
        });
  });
  </script>
</head>

<div id="dialog" title="Dialog Title">I'm in a dialog</div>

</body>
</html>
like image 722
John Carter Avatar asked Oct 28 '11 01:10

John Carter


2 Answers

you could do exactly what JAAulde suggested, or avoiding tracking binding and use the create event:

$(document).ready(function() {
    $('#dialog').dialog({
        create: function() {
            $(this).closest('div.ui-dialog')
                   .find('.ui-dialog-titlebar-close')
                   .click(function(e) {
                       alert('hi');
                       e.preventDefault();
                   });
        }
    });
});
like image 113
Kris Ivanov Avatar answered Oct 14 '22 16:10

Kris Ivanov


I know this is an old question, and the OP said he didn't want to use beforeClose, but the reason was because it always fires, even for things other than the X. However, I noticed that the techniques here don't allow me to prevent a dialog from closing (I want a confirm window to open if there are unsaved changes). If we Ithe techniques here, use beforeClose, we can achieve the desired result, but make it cancellable. I used:

beforeClose: function (e, ui) {
    if ($(e.currentTarget).hasClass('ui-dialog-titlebar-close') && whateverMyConditionIs)
        e.preventDefault();
}

Thought it might help someone else!

like image 5
dmeglio Avatar answered Oct 14 '22 15:10

dmeglio