質問: AJAX 成功関数から DOM に追加された要素が、成功関数が戻るまで表示されないのはなぜですか?
コンテキスト: AJAX を使用して、約 6000 個の内部オブジェクトを含む JSON オブジェクトを取得しています。これを使用してテーブルにデータを入力します。残念ながら、テーブルを作成するのに約 10 秒かかるため、読み込み中に視覚的なフィードバックをユーザーに提供したいと思います。私が呼び出しappend
たときに、ユーザーはテーブルの行を「ライブ」で見ることができると思いましたが、成功が戻るまでロードされません。それがうまくいかなかったとき、Bootstrap プログレス バーの幅を更新しようとしましたが、処理中にバーがフリーズするだけです。
目標: テーブルの行が追加されたときにユーザーに表示されるか、更新時に進行状況バーが適切に表示されるようにしたいと考えています。
コード:
AJAX 呼び出し:
$.ajax({
type: "GET",
url: myUrl,
contentType: "application/json; charset=UTF-8",
dataType: "json",
success: function(results){
for(var i in results) {
$("#bar").css("width", s / results.length + "%");
console.log(i);
var t_cell = $('<td class="'+attrs[i]+'">');
t_cell.css("background-color", results[i]["val0"]);
t_cell.append($("<span class='val'>").text(results[i]["val1"]));
t_cell.append($("<span class='raw'>").text(results[i]["val2"]]));
t_row.append(t_cell);
$("#review_table > tbody").append(t_row);
}
$('#progress').hide();
}
});
HTML:
<div id="progress" class="progress progress-striped active">
<div id="bar" class="bar" style="width: 1%;"></div>
</div>
<div id='review_div'>
<table class='table table-condensed' id='review_table'>
<thead></thead>
<tbody></tbody>
</table>
</div>