Click here to Skip to main content
15,886,137 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi All,

I am calling one function on onBeforeunload event of page. In that function I am showing modal pop up which having message and Yes/No button. on click of any button it will give ajax call and perform some operation. But currently I am facing one issue that this popup is not waiting until the user click on the button. It is proceeding with onunload event of the page.
Please suggest what can be done in this case.
Below is the code.

onbeforeunload="PromptForUnlock()"

JavaScript
function PromptForUnlock(e) {
    ExtenderControls.ModalPopup.showModalPopup(
            ExtenderControls.ModalTypeEnum.YesNo,
            360, 110, true, false,
            Resources.Information, '<span style=\"font-size:15px;color:#003366;font-weight:bold;\">' + Resources.AppKeepLock + '</span>',
            'checkApplicationUnlock()');
    // var result = window.showModalDialog('application_diag_unlock.aspx', Arguments, sFeatures);
return false;
   }

function checkApplicationUnlock() {
    var ret = ExtenderControls.ModalPopup.modalPopupResult();
    var userID = "";
    if (ret == ExtenderControls.ModalPopupResultEnum.No) {
        ExtenderControls.ModalPopup.hideModalPopup();
        var param = '{"UserID":"' + userID + '"}';
        ExtenderControls.ModalPopup.showModalPopup(
            ExtenderControls.ModalTypeEnum.Information,
            360, 110, false, true, Resources.Loading,
            '<span style=\"font-size:15px;color:#003366;font-weight:bold;\">' + Resources.Loading + '</span>', null);
        $.ajax({
            type: 'POST',
            url: 'PageMethods.aspx/SetApplicationLock',
            data: param,
            contentType: 'application/json; charset=utf-8',
            success: function () {
                CallBack = true;
            },
            error: function () {
            },
            //set async to false will make the server method call synchronously, the browser will be blocked during the call
            async: false
        });
        StartTimer();
    }
    else {
        ExtenderControls.ModalPopup.hideModalPopup();
    }
    CheckForChangesToApplication(Resources.SavePrompt);
}

function StartTimer() {
    if (CallBack || TimeElapsed >= Timeout) {
        ExtenderControls.ModalPopup.hideModalPopup();
    }
    else {
        window.setTimeout("StartTimer()", 1000);
        TimeElapsed++;
    }
}
Posted

1 solution


When a string is assigned to the returnValue property of window.event, a dialog box appears that gives users the option to stay on the current document ...



The function should assign a string value to the returnValue property of the Event object and return the same string.
...
Since 25 May 2011, the HTML5 specification states that calls to window.showModalDialog(), window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event.


You can't do anything clever in the onbeforeunload event, since that would provide a way for malicious pages to prevent you from leaving the page.

All you can do is return a message, which will be displayed to the user. The user can chose to cancel the navigation and stay on the page, or continue navigating away from the page.

http://www.zachleat.com/web/dont-let-the-door-hit-you-onunload-and-onbeforeunload/[^]
http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900