how to check if user has closed the dialog by clicking on cross icon in jquery UI dialog

Question

I have two dialog boxes. User selects some value in first one and it is reflected in DOM of the page. The first dialog box is closed and another is displayed. If user clicks on the cross button in right hand top corner to close the dialog, I want to revert the changes made in previous dialog box. On OK button, I have to do some stuff by setting values. On this button, I'm closing the dialog. On close event, till now I have code to reset the form. But, if user cancels the dialog box, how I would know, how the close event was triggered i.e. from OK button or cross button ?

Answer 1

You can find that "X" button by it's class, .ui-dialog-titlebar-close, then attach a click handler to it when creating the dialog, like this:

$("#test").dialog({
    //dialog options...
}).parent().find(".ui-dialog-titlebar-close").click(function() {
    alert("Closed by title bar X, clear the other form here");
});

You can test it here.

Answer 2

You can use the beforeClose event