Showing Progress while Child row loads

hifni

Coming again with another question

This time I had a requirement to show some progress while Child rows are being loaded. Since there is an Api call which relatively takes little time to return data, I do want to show the some progress unless the user who clicks the parent row is totally unaware whether there is a call done to see its child rows.

What I have done:

I wrote a style sheet class which has a loader-small.gif image as this:

tr.loading td.details-control {
    background: url('/Images/loader-small.gif') no-repeat center center;
}

and applied like this:

$('#accountManagerEarningsDataTable tbody').on('click', 'td.details-control', function () {

        var tr = $(this).closest('tr');
        var row = table.row(tr);

        try {
            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                //Calling the loading Class ------>
                tr.addClass('loading');

                // Open this row
                var arrForTable1 = [];
                var arrForTable2 = [];

                totalBrokerage = 0;
                totalRetailBrokerage = 0;
                totalSelfServiceBrokerage = 0;

                console.log('You selected: ' + row.data().AccountManagerID);

                var settings = {
                    "columnDefs": [
                    { targets: 1, align: "right", decimals: 0 },
                    { targets: 2, align: "right", decimals: 0 },
                    { targets: 3, align: "right", decimals: 0 },
                    { targets: 4, align: "right", decimals: 2 },
                    { targets: 5, align: "right", decimals: 2 }
                    ]
                };

                //problems with asynchoronus call back
                var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext);

                if (response.success === "true") {
                    for (var i = 0; i < response.value.length; i++) {

                        for (var j = 0; j < response.value[i].Securities.length; j++) {

                            var itemRow2 = {};
                            itemRow2["Security ID"] = response.value[i].Securities[j].SecurityId;
                            itemRow2["Trades"] = response.value[i].Securities[j].Trades;
                            itemRow2["Buy Qty"] = response.value[i].Securities[j].BuyQuantity;
                            itemRow2["Sell Qty"] = response.value[i].Securities[j].SellQuantity;
                            itemRow2["Total Brkg"] = response.value[i].Securities[j].Effective_Brokerage;
                            itemRow2["Online Brkg"] = response.value[i].Securities[j].Online_Brokerage;
                            arrForTable2.push(itemRow2);

                            totalBrokerage = totalBrokerage + parseFloat(response.value[i].Securities[j].Effective_Brokerage);
                            totalSelfServiceBrokerage = totalSelfServiceBrokerage + parseFloat(response.value[i].Securities[j].Online_Brokerage);
                        }

                        totalBrokerage = Math.round(totalBrokerage * 100) / 100;
                        totalSelfServiceBrokerage = Math.round(totalSelfServiceBrokerage * 100) / 100;
                        totalRetailBrokerage = Math.round(totalRetailBrokerage * 100) / 100;



                        var itemRow1 = {};
                        itemRow1["Account ID"] = response.value[i].AccountId;
                        itemRow1["Account Name"] = response.value[i].AccountName;
                        itemRow1["..."] = '<div class="alert alert-info" role="alert">' + buildHtmlTable(arrForTable2, 'table2x' + j, settings) + '<p>Total Brokerage ' + numberWithCommas(totalBrokerage) + '</p></div>';
                        arrForTable1.push(itemRow1);
                        arrForTable2 = [];

                        totalBrokerage = 0;
                        totalRetailBrokerage = 0;
                        totalSelfServiceBrokerage = 0;

                    }

                    tr.removeClass('loading');
                    htmlTable1 = buildHtmlTable(arrForTable1, 'table1x' + i);
                    row.child(htmlTable1).show();
                    tr.addClass('shown');
                }
                else {
                    row.child('<table><tr><td>' + response.value[0].AccountId + '</td></tr></table>').show();
                    tr.addClass('shown');
                };
            }
        } catch (e) {
            console.log(e.message);
        }

    });

The Problem:

Firefox nicely shows the Progress image after the user clicks it, but Edge and Chrome does not show. Both browsers crossed this piece of code when I was debugging from developer tools of the respective browser.

Its browser compatible problem? Is there a solution for it? Help me please

My StackOverFlow Question