[jQuery] window.onbeforeunload fires in IE when a JQuery UI Dialog is opened
This is very frustrating. I have the following code
$(window).bind("beforeunload", function()
{
// get's instances to all three editors
var edMainT = FCKeditorAPI.GetInstance('edMain');
var edSecondaryT = FCKeditorAPI.GetInstance('edSecondary');
var edAdditionalT = FCKeditorAPI.GetInstance('edAdditional');
// check to see if the editors are dirty (have there been any
changes?)
if (edMainT.IsDirty() || edSecondaryT.IsDirty() ||
edAdditionalT.IsDirty())
{
if (confirm("Changes have been made but not saved.\n\nWould you
like to Save before exiting?"))
{
isExiting = true;
Save(false);
} // save full (not draft)
}
edMainT = null;
edSecondaryT = null;
edAdditionalT = null;
});
Which works awesome in FireFox, but in IE, any time I open a JQuery UI
Dialog or use JQuery to modify the DOM the function runs and a confirm
box pops up.
Below are samples of code that cause this behavior.
$("#divLayoutChooser").dialog({
title: "Layout Chooser",
autoOpen: false,
modal: true,
width: 450,
height: 350,
overlay: {
opacity: 0.4,
background: "white"
}
});
$("#lnkLayout").click(function(event) // will open the dialog to show
the layout chooser
{
$("#divLayoutChooser").dialog("open");
});
or even just modifying the DOM does it, as this code shows.
$("#lnkPreview").click(function(event) // will show preview
{
var edMain = FCKeditorAPI.GetInstance('edMain');
var edSecondary = FCKeditorAPI.GetInstance('edSecondary');
var edAdditional = FCKeditorAPI.GetInstance('edAdditional');
edMainText = edMain.GetXHTML();
edSecondaryText = edSecondary.GetXHTML();
edAdditionalText = edAdditional.GetXHTML();
edMain = null;
edSecondary = null;
edAdditional = null;
$("#pvMain").html(edMainText);
$("#pvSecondary").html(edSecondaryText);
$("#pvAdditional").html(edAdditionalText);
$("#pvPageTitle").html("<h1>" + $("#tbxPageTitle").val() + "</h1>");
$("#fckToolBar").css("display", "none");
$("#fckToolBar2").css("display", "none");
$("#toolbar").css("visibility", "visible");
$("#edMain").css("display", "none");
$("#edSecondary").css("display", "none");
$("#edAdditional").css("display", "none");
$("#tbxPageTitle").css("display", "none");
$("#pvMain").css("display", "block");
$("#pvSecondary").css("display", "block");
$("#pvAdditional").css("display", "block");
$("#pvPageTitle").css("display", "block");
});
Does anyone have any ideas why this is happening?
Anyone run into this before?
Thanks so much for your time!