[解決済み] jQuery AJAX呼び出しのローディングインジケータの実装
2023-03-21 10:45:20
質問
リンクから起動するBootstrapのモーダルがあります。AJAX クエリがデータベースからデータを取得する間、約 3 秒間空白のままです。ある種の読み込みインジケータを実装するにはどうしたらよいでしょうか。twitterのブートストラップは、デフォルトでこの機能を提供していますか?
EDIT: モーダル用のJSコード
<script type="text/javascript">
$('#myModal').modal('hide');
$('div.divBox a').click(function(){
var vendor = $(this).text();
$('#myModal').off('show');
$('#myModal').on('show', function(){
$.ajax({
type: "GET",
url: "ip.php",
data: "id=" + vendor,
success: function(html){
$("#modal-body").html(html);
$(".modal-header h3").html(vendor);
$('.countstable1').dataTable({
"sDom": "T<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"aaSorting":[[0, "desc"]],
"iDisplayLength": 10,
"oTableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf",
"aButtons": ["csv", "pdf"]
}
});
}
});
});
});
$('#myModal').on('hide', function () {
$("#modal-body").empty();
});
</script>
どのように解決するのですか?
モーダルの読み込みに jQuery.get などの jQuery ajax 関数を使用しているのではないでしょうか。Ajax 呼び出しの前にインジケータを表示し、Ajax が完了したら非表示にすることができます。次のような感じです。
$('#indicator').show();
$('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); });
関連
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] jQueryを使ったAjaxリクエストの中断
-
[解決済み] jQuery Ajax呼び出し後のリダイレクトリクエストを管理する方法
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] どうすればjQueryに非同期ではなく、同期のAjaxリクエストを実行させることができますか?
-
[解決済み] jQuery AJAX送信フォーム
-
[解決済み] jQuery Ajax ファイルアップロード
-
[解決済み] jQuery の Ajax リクエストがすべて終了するまで待ちますか?
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] BlobからArrayBufferへ移行する方法
-
[解決済み] ECMAScriptとは?
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?
-
[解決済み] jQueryのバージョン1、バージョン2、バージョン3の違いは何ですか?[クローズド]
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?