How to stop the javascript loader when the data retrieved from the database

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

@H.Mikhaeljan Hi Added the HideLoader(). Sorry I thought I already added it. — kas_miyulu, Apr 10 '18 at 13:46
And your 100% sure it never gets to HideLoader()? Did you test it with a alert('test'); or console.log('test'); ? — H.Mikhaeljan, Apr 10 '18 at 13:55
the hodeLoader() does not get called even before the dt.rows.count > 0 I tried it with the alert('test') as well. Still no luck. I'm going to try one more thing. I will let you know the results — kas_miyulu, Apr 10 '18 at 17:28
I just discovered the only reason it's not working is because of the saving to excel function. Is there any way around to hide/stop the GIF — kas_miyulu, Apr 10 '18 at 18:11
No error. It's just that the javascript function not getting called when it use export to excel function in c# — kas_miyulu, Apr 10 '18 at 19:47

H.Mikhaeljan · Answer 1 · 2018-04-10T14:26:49.897

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();

How to stop the javascript loader when the data retrieved from the database

1 Answers1