从数据库中检索数据时如何停止javascript加载器

Question

I'm using a javascript with setTimeout function to display a GIF on a onclientclick of a button. I;m trying to stop/hide the GIF once the data is retrieved from the database. So far no luck. I have tried the following. Any help is greatly appreciated.

CSS

.modal {
     position: fixed;
     top: 0;
     left: 0;
     background-color: black;
     z-index: 99;
     opacity: 0.9;
     filter: alpha(opacity=80);
     -moz-opacity: 0.9;
     min-height: 100%;
     width: 100%;
}
.loading {
     font-family: Arial;
     font-size: 10pt;
     width: 200px;
     height: 100px;
     display: none;
     position: fixed;
     opacity: 0.9;
     z-index: 999;
}

Javascript

function ShowLoader() {
    if (Page_ClientValidate('DownloadReport')) {
        setTimeout(function() {
            var modal = $('divLoader');
            modal.addClass('modal');
            $('body').append(modal);
            var loading = $('.loading');
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
            loading.css({
                top: top,
                left: left
            });
        }, 100);
    } else {

    }
};

      function HideLoader() {
        document.getElementById('<%= divLoader.ClientID%>').style.visibility = "hidden";
    };

so on button click I call the showLoader,

 <asp:Button ID="btnGenerateRep" CssClass="btnGenerateRep" runat="server" Text="Download Report" ValidationGroup="DownloadReport" OnClientClick="ShowLoader();" OnClick="btnGenerateRep_Click" />

And I want to stop it when data is retrieved from DB

C# code,

DataTable dt = new DataTable();

dt.Load(cmd.ExecuteReader());

if (dt.Rows.Count > 0) {

    ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "HideLoader()", true);

    string dateTimeStamp = DateTime.Now.ToString("yyyy-MM-dd HH-mm-ss");
    string excelFileName = aliasName + "-" + dateTimeStamp + ".xlsx";
    string worksheetsName = "Sheet";

    var format = new ExcelTextFormat();
    format.Delimiter = ',';
    format.EOL = "\r";

    using(ExcelPackage package = new ExcelPackage()) {
        ExcelWorksheet worksheet = package.Workbook.Worksheets.Add(worksheetsName);
        worksheet.Cells["A1"].LoadFromDataTable(dt, true);

        Response.Clear();
        package.SaveAs(Response.OutputStream);
        Response.AddHeader("content-disposition", "attachment; filename=" + excelFileName + ";");
        Response.Charset = "";
        Response.ContentType = "application/vnd.xlsx";
        Response.End();

    }
}     

I'm calling the javascript from C# code, but it's not firing. Or can I capture the Save command when the SaveAs dialog box comes up from package.SaveAs and then call the javascript from there?

I have also tried hide the asp:Panel where the GIF resides when data is received. Still no luck. I would really appreciate any help. Thanks a lot

Answer 1

As first move
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "HideLoader()", true); out from the if (dt.Rows.Count > 0) { ... }

because this means if there are 0 rows it will never add the script so it wil never get executed clientside so it wil also never hide the loading.

As second test HideLoader and see if you get a alert.

function HideLoader() {
   alert('test');
};

If you get a alert it means it gets called. After that add your own line back and check if that works.

Also since you are using jquery.show maybe also just use same way to hide it? Check this to change that if needed.

 $('.loading').hide();