Question

Inside a webpage I have an Excel download button, which redirects to a webpage that serves the requested Excel file via the application/ms-excel MIME type, which usually results in a file download in the browser.

In the webpage, I have the following jQuery code:

$(document).ready(function () {
    $(".div-export .button").click(function () { setBusy(true); });
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () { 
        setBusy(false);
    });
});

Which displays a busy animation while the user waits for the Excel file to be served.

Problem is: The animation doesn’t end (setBusy(false);) after the file download, because the endRequest event doesn’t get fired, probably because of the server redirect.

Does anyone have a workaround for this?

Edit: The download button is handled in an UpdatePanel.

Answer 1

Instead of using a server redirect, I’ve decided to use a javascript document redirect that is triggered after the mouse cursor is reset. To do this, I’ve included a hidden field that holds the url:

<asp:HiddenField id="hidExportUrl" runat="server" EnableViewState="false" />

Which is handled by the client-side end_request handler:

$(document).ready(function () {
    $(".div-export .button").click(function () { setBusy(true); });

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () { 
        setBusy(false);

        var url = $("[id$='hidExportUrl']").val();

        if (url && url != "") {
            $("[id$='hidExportUrl']").val("");
            window.location = url;
        }
    });
});