I have a few functions that run during postback, and they can sometimes take a bit of time to finish.
When a postback is triggered, I display a loading image using the following code:
function showLoader()
{
document.getElementById("<%=loadingImage.ClientID%>").style.visibility="visible";
}
Now, I want to enhance this function so that if a user tries to leave while it's still running, they are notified that the operation is incomplete.
I came across this code snippet:
function goodbye(e) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = 'Are you sure you want to leave?'; //This message is displayed on the dialog box
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
window.onbeforeunload=goodbye;
This solution works, but I only want the code to be active when the loading image is visible.
I attempted the following modification, but it prompts the alert message when the page finishes postback:
function goodbye(e) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = 'Are you sure you want to leave?'; //This message is displayed on the dialog box
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
function showLoader()
{
document.getElementById("<%=loadingImage.ClientID%>").style.visibility="visible";
window.onbeforeunload=goodbye;
}
Do you have any suggestions on how I can modify this to only prompt the user when they try to leave the page, not when the postback process completes?