Question

I am working on a asp.net (framework 4) that has a requirement for the user to be notified if they are trying to leave the page without saving changes. Well I found a solution by calling the onbeforeunload function via JavaScript. Works great in IE but not in Firefox, Safari or Chrome.

Now here is where the problem comes in. I’m using AJAX postbacks and if the user is prompted to save the changes before leaving the page, any controls inside of the update panel no longer will postback to the server. For example, if a press the save button that is inside of the update panel, nothing happens.

Here are some code snippets

javascript:

window.onbeforeunload = function (e) {
    if (doBeforeUnload() == true) {
        var ev = e || window.event;
        // For IE and Firefox prior to version 4
        if (ev) {
            ev.returnValue = "You have modified the data entry fields since the last time it was saved. If you leave this page, " +
                "any changes will be lost. To save these changes, click Cancel to return to the page, and then Save the data.";
        }
        // For Safari
        return "You have modified the data entry fields since the last time it was saved. If you leave this page, " +
                "any changes will be lost. To save these changes, click Cancel to return to the page, and then Save the data.";

    }
}

ASP.NET:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
    <ContentTemplate>
        <%--no controls inside of this panel will postback to server if user clicks the “Stay on Page” button--%>
    </ContentTemplate>
</asp:UpdatePanel>

Seems to be plenty of posts on the net but no solutions. Any ides besides not using async postbacks?

Answer 1

I came across this question when I was searching for the similar issue. I was able to solve this by doing the following:

var doOnBeforeUnloadCheck = true;  // global to set in link button
window.onbeforeunload = function (e) {
    if (doOnBeforeUnloadCheck && doBeforeUnload()) {
        // do stuff
    }
    // Make sure to always re-enable check to ensure the event will still trigger
    // where not specified to disable event.
    doOnBeforeUnloadCheck = true;  
}

In a LinkButton you just make sure to set the global to false before running any other javascript or doing the postback:

<asp:LinkButton ID="yourButton" runat="server"
    OnClientClick="doOnBeforeUnloadCheck = false;" OnClick="yourButton_Click" />

I came across this solution with help from the following link:

http://www.jimandkatrin.com/CodeBlog/post/LinkButton-UpdatePanel-onbeforeunload.aspx

I found this question before I found my answer so if anyone else has the same issue this might save them some time. Hope that helps.