How to prevent a user from clicking an imagebutton that's starting a file download multiple times in a gridview in ASP.NET Webforms?

Question

I have something like this in a gridview:

<asp:TemplateField>
<ItemStyle />
<ItemTemplate>
    <asp:ImageButton ID="btnDownloadHidden" Enabled="false" runat="server" 
        CommandName="ScaricaDocHidden" style="display:none" CommandArgument='<%#Eval("ID_MODULO") %>' />
    <asp:ImageButton ID="btnDownload" Enabled="true" runat="server" 
        CommandName="ScaricaDoc" OnClientClick="disable()" CommandArgument='<%#Eval("ID_MODULO") %>' />
</ItemTemplate>

and this in the code-behind:

protected void gridViewa_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        switch (e.CommandName)
        {
        case "ScaricaDoc":
            {
                string id_modulo = e.CommandArgument.ToString();
                int? id_contratto = contratto.idContratto;

                byte[] pdfBytes = recuperaPDF();

                Response.ClearContent();
                Response.ClearHeaders();
                Response.Clear();

                MemoryStream ms = new MemoryStream(pdfBytes);
                Response.ContentType = "application/pdf";
                Response.AddHeader("content-disposition", "attachment;filename=doc.pdf");
                Response.Buffer = true;
                ms.WriteTo(Response.OutputStream);
                Response.Flush();
                //Page.ClientScript.RegisterStartupScript(this.GetType(), "testsOnPostback", "$(function() { tests(); })", true);
                //GridViewRow gvRow = (GridViewRow)(((ImageButton)e.CommandSource).NamingContainer);
                //ImageButton img = (ImageButton)gvRow.FindControl("btnScaricaDoc");
                //img.Attributes.Clear();
                //img.Attributes.Add("display", "block");
                Response.End();
                Response.Write("<script>window.close();</script>");

               break;
            }

and this javascript:

function disable() {
    alert('disable');
    var btn = $("input[type='image']");
    var hdn = $("input[name$='DownloadHidden']");
    var btn = $("input[name$='btnDownload']");
    btn.css('display', 'none');
    hdn.css('display', 'block');
}

function enable() {
    alert('enable');
    var btn = $("input[type='image']");
    var hdn = $("input[name$='DownloadHidden']");
    var btn = $("input[name$='btnDownload']");
    btn.css('display', 'block');
    hdn.css('display', 'none');

}

Now, where I have to execute the enable function to get it work? I have already see post like this:

How do I prevent users clicking a button twice?

But I've tried and not working, also using return false; or UseSubmitBehavior="false", so I decide to use another button already disabled, as I see in another post. But I just don't know how to re-enable it.

UPDATE:

I've seen this: file download by calling .ashx page so now all my download code is on the ashx and I don't need anymore a postback to download the file, and that's really good because the entire page is quite heavy. So now my javascript is like:

function disable() {
    var imageBtn = $('.js-image-button');
    //WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(imageBtn.attr('name'), "", true, "", "", false, true));
    alert('disable');
    imageBtn.attr('disabled', true);
    window.location = 'DownloadPDF.ashx';
    //alert('enable');
    //imageBtn.removeAttr('disabled') 
}

But the problem still remain, there's a way to enable the button with javascript when the download is completed?

UPDATE 2:

I've seen this:

http://forums.hexus.net/programming-web-development/91831-javascript-wait-until-page-loaded-proceed-next-action.html

and this:

Javascript - How to detect if document has loaded (IE 7/Firefox 3)

so:

function disable() {
    var imageBtn = $('.js-image-button');
    //WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(imageBtn.attr('name'), "", true, "", "", false, true));
    //alert('disable');
    imageBtn.attr('disabled', true);
    window.location = 'Components/TabCheckList/DownloadPDF.ashx';
    checkLoad(); 
}

function checkLoad() {
    if (document.readyState === "complete") {
        var imageBtn = $('.js-image-button');
        //alert('enable');
        imageBtn.removeAttr('disabled')
    } else {
        setTimeout('checkLoad()', 1000);
    }
}

That's working also withouth .ashx using again the WebForm_DoPostBackWithOptions instead of window.location. The button is enabling when the file is generated and the broweser popup is showed, not when the download is completed, but it's good enough!

UPDATE 3

It's not working on firefox, it always give me readyState = 'interactive'

Answer 1

I assume you're doing a post back and want to prevent further clicks while the document is downloading?

You could try keeping it a little more simple. Leave one button, give it a class name which you can select by, I assume being in a grid, there will be multiple download buttons.

You should be able to disable the button on click by setting the disabled attribute.

Example Here (try clicking the button multiple times): http://jsbin.com/niziko/1/edit?html,js,output

Still assuming this is a post-back scenario, once the server responds back to the client, the button should be reset to it's normal state.