子ローがロードされている間に進行状況を表示する

Question

もう一度別の質問が表示されます:)

今回は、子ローがロードされている間にいくつかの進捗状況を表示する必要がありました。相対的にデータを返すのに少し時間がかかるApiコールがあるので、親ローをクリックしたユーザーが子ローを表示するためにコールが行われたかどうかを気にしない限り、いくつかの進捗状況を示したいと思います。

は私がやっていること：

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

：

私はこのよう

ローダーsmall.gif

イメージを持っているスタイルシートクラスを書きました

このように適用されます：

$('#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); 
     } 

    }); 

問題：

ユーザーがクリックした後にFirefoxがうまく進捗画像を示しているが、エッジとChromeは表示されません。それぞれのブラウザの開発ツールからデバッグしていたときに、両方のブラウザがこのコードを通過しました。

ブラウザの互換性の問題？それには解決策はありますか？お願い助けて。

Answer 1

クロムの場合は、サーバコール中にローディングバーを表示しているときにこのような問題があります。サービスコールを行う場合は、以下の変更を行ってください。まず、（1ミリ秒を言う）のタイムアウトを提供することにタイムアウト機能

setTimeout(function(){ 
    var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext); 
    ...... 
    //Your service calls and response call backs 
},1); 

を与えることによって、サービスの呼び出しを行うその後テーブル

tr.addClass('loading'); 

にクラスのロードを追加し、Chromeはバインドする時間を取得しますDOMへのローディングバー、他の場合、DOMオブジェクトはスピナーを表示することができません。