onbeforeunload - called on every postback / ajax request

[Jon]

Hi..
I'm trying to use onbeforeunload to check if the user is exiting a form before saving changes.
I'm using the AjaxPanel - But onbeforeunload is called on every single ajax request.
How can I test if the pages is REALLY being unloaded ?    Help...........
thanks again!!!!!!

[Sebastian]

Hello Jon,

This is indeed odd since the onbeforeunload browser event should be raised only when you attempt to close the browser window. I performed a quick test under IE/FF using the latest version of RadControls for ASP.NET AJAX and the event was not fired on ajax requests. Here is the code I used:

            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <script type="text/javascript">
            window.onbeforeunload = function(){
              alert("browser window closing...");
            };
            </script>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px">
                <asp:Button ID="Button1" runat="server" Text="Postback" />
            </telerik:RadAjaxPanel>

Can you please verify that on your machine? Any further details regarding your particular configuration settings can help us determine the reason for the abnormality and address it asap.

Best regards,

Sebastian

the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Francis]

Hi Sebastian,

I'm having the same problem.

I'm using a RadDataPager with AJAX and the window.onbeforeunload function is being fired before the "OnRequestStart" event of my RadAjaxManager. Here is the code:

var allowConfirm = true;
window.onbeforeunload = function () {
    if (allowConfirm)
        return "You are leaving the page!";
    else
        allowConfirm = true;
}

function SetAllowConfirm(allow) {
    alert('AllowConfirm');
    allowConfirm = allow;
}

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
                ClientEvents-OnRequestStart="SetAllowConfirm(false)"
                ClientEvents-OnResponseEnd="SetAllowConfirm(true)">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="pagerQuestions">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="toolsExamen"/>
                <telerik:AjaxUpdatedControl ControlID="editNotesPersos" LoadingPanelID="RadAjaxLoadingPanel1"/>
                <telerik:AjaxUpdatedControl ControlID="btnSommaire"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

The onbeforeunload function is fired on AJAX calls in IE9 but not in Chrome nor FireFox.

Thanks.

[Francis]

 

[Francis]

Any news? This is a main issue in our application.

[Antonio Stoilkov]

Hi Francis,

The described issue is browser behavior. However, I have assembled a sample project demonstrating how the problem could be resolved. The idea is to handle document.click event and check if the event target is ajax initiator which will determine the behavior in the onbeforeunload event.

var shouldConfirm = true;
var isAjaxRequest = false;
document.onclick = function (event)
{
    var id = event.target.id;
    var ajaxSettings = $find("<%= RadAjaxManager1.ClientID %>").get_ajaxSettings();
    for (var i = 0; i < ajaxSettings.length; i++)
    {
        if (id.endsWith(ajaxSettings[i].InitControlID))
        {
            isAjaxRequest = true;
            return;
        }
    }
    isAjaxRequest = false;
}

window.onbeforeunload = function (sender, eventargs)
{
    if (shouldConfirm && !isAjaxRequest)
    {
        return "You have made unsaved changes. Would you still like to leave this page?";
    }
}

Kind regards,
Antonio Stoilkov
the Telerik team

[Francis]

Hi!

Glad you replied, thanks a lot!
But there is a javascript issue with your code...
"Error: Unable to get value of the property 'target': object is null or undefined"

With Chrome, the onClick event is MouseClick but unfortunately, it is undefined in IE 9.

Got a solution?

[Francis]

I managed to fix the javascript so it works on all browsers:

Modified:
 - The " while (targ && !targ.id) "  loops until the RadDataPager element is reached.
 - The function exits if it is not IE, since only IE Ajax calls will make it to the "onbeforeunload" function.
 - The "onbeforeunload" function must reset the "isIEAjaxRequest" variable.

Still thanks for the help!

(see code below)

var allowConfirm = true;
var isIEAjaxRequest = false;
window.onbeforeunload = function () {

if (!isIEAjaxRequest && allowConfirm) {

return "Please, don't leave already!";

}

else {

allowConfirm = true;

isIEAjaxRequest = false;

}
}
document.onclick = function (evt) {

if (evt) {

isIEAjaxRequest = false;

return;

}

 

var targ = window.event.srcElement;

while (targ && !targ.id) {

targ = targ.parentNode;

}

if (targ && targ.id) {

var id = targ.id;

var ajaxSettings = $find("<%= RadAjaxManager1.ClientID %>").get_ajaxSettings();

for (var i = 0; i < ajaxSettings.length; i++) {

if (id.endsWith(ajaxSettings[i].InitControlID)) {

isIEAjaxRequest = true;

return;

}

}

}
}