Ask your JavaScript questions! Pay money and get answers fast! (more info)

How do I add close() function to top X in jQuery dialog? JavaScript

  • SOLVED

[[LINK href="http://jqueryui.com/demos/dialog/"]]I'm using the jQuery dialog. [[/LINK]]

Here is my code:

function toggleDialogBoxForNewRecords(idOfTheLinkThatOpensTheDialogBox, idOfDivOrFormThatEnclosesDialogBox, idOfTheInputIntoWhichTheUserTypedANewRecordName, idOfDivThatHoldsMessages, idOfSelectBoxForParentElement) {
$('#' + idOfTheLinkThatOpensTheDialogBox).click(function() {
$('#' + idOfDivOrFormThatEnclosesDialogBox).dialog('open');
return false;
});
$('#' + idOfDivOrFormThatEnclosesDialogBox).dialog({
autoOpen: false,
minHeight: 200,
minWidth: 400,
buttons: {
// 2011-03-09 - this only fires when the "Close" button is clicked, not
// when the X in the upper right corner is clicked
"Close": function () {
// the next few lines are meant to blank inputs and reset select boxes
// in case the user opens this dialog again, to add something else
$("#" + idOfSelectBoxForParentElement)[0].selectedIndex = 0;
$('#' + idOfTheInputIntoWhichTheUserTypedANewRecordName).val(' ');
$('#' + idOfDivThatHoldsMessages).html('<p> &nbsp; </p>');
$(this).dialog("close");
}
}
});
}


This gives me the dialog box that you can see in the screenshot that I've uploaded.

You see that I've created a close() function? This works great if people click the "Close" button in the bottom right hand corner. However, it does not work if the user clicks the upper right X, which closes the box without calling the close() function.

How can I attach the close() function to the closing X in the top right corner?

Answers (3)

2011-03-09

Marc Allan Feldman answers:

You can catch the close event using the following code:

$('div#popup_content').bind('dialogclose', function(event) {
alert('closed');
});

Obviously I can replace the alert with whatever I need to do.

copied from
http://stackoverflow.com/questions/171928/hook-into-dialog-close-event


Lawrence Krubner comments:

Marc,

Thanks for this but what would I test for? To see if the function is firing? I'm sure it isn't - either something would happen or I would get an error in the error console.

What else might I test for?

Or do you mean I can catch the closing event triggered by the upper X and add my code to it?


Lawrence Krubner comments:

Oh, fantastic! This did work great. Thanks.

2011-03-09

Eric Weber answers:

Are you getting any errors in your console?


Lawrence Krubner comments:

No, everything works fine.

2011-03-09

Bill Hunt answers:

Is the close button working correctly in the first place? (You shouldn't need the quotes around 'close', which makes me thing there might be a bug.) Whatever you specify for the close property should be called when you run elm.dialog('close') regardless.


Lawrence Krubner comments:

I removed the quotes, but the problem remains - the "close" function only fires when the lower close button is clicked, not when the upper close button is clicked.