Bootstrap5 を利用した画面全体のローディング表示
いろいろなシステムにおいて、ユーザがアクションを起こしたのに画面が何も変わらなかったら、ユーザは不安になってしまいます。 そのため、Webシステムなどであればページの読み込みやサーバ問い合わせ中にローディングを表示したりします。 よく利用する機能ですので、フレームワークなどで用意してくれてたらなと思うのですが、システムや開発者によって実装方法が異なるためか、決まった形式のものが存在しません。 今回は私がよく利用するローディング表示を Bootstrap5 を利用して示したいと思います。 Bootstrap5 では Bootstrap4 にはなかった細かな設定が含まれましたので、それを利用することで必要な CSS を最小限にすることができます。（2021年9月現在 Bootstrap5 はまだベータ版であるため、正式版がリリースされたときに実装が異なる可能性があります。） ローディング表示実
ajax(jQuery)でファイルをアップロードする - Qiita
<form> <input type="file" name="upfile"> <button id="upButton" type="button">送信</button> </form> let $upfile = $('input[name="upfile"]'); let fd = new FormData(); fd.append("upfile", $upfile.prop('files')[0]); $('#upButton').on('click', function () { $.ajax({ url:'index.php', type:'post', data: fd, processData: false, contentType: false, cache: false, }).done(function (data) { // 成功時の処理 }).fail(fu
jQueryでローディング画面を実装 - Qiita
はじめに 今回は、フォームなどで送信した際に、送信中に画面上にローディング画面を表示させる実装を行います。 完成イメージ 環境 MacOS 10.15.7 ruby 2.6.5 Ruby on Rails 6.0.0 jquery 3.4.1 前提条件 jQueryが導入済みであること。 font-awesomeが導入済みであること。 作業していきましょう ①jquery-loading-overlayの導入 今回は、「jquery-loading-overlay」というjQueryプラグインを使用してローディング画面を実装します。 jquery-loading-overlayを使う場合は、npmでインストールする方法や、CDNを使って導入する方法がありますが、今回はCDNを使った方法で導入していきます。 application.html.erbに
おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ（追憶） - Qiita
$.ajax({ url: "http://jsrun.it/assets/E/H/Z/t/EHZt3", success: function (data) { $("#results").append(data); }, error: function () { alert("読み込み失敗"); } }); // urlを適当なものに変更すると「読み込み失敗」のアラートが出ます。 jsdo.itで実行する これはInternet Explorer 6(故)が猛威を振るっていた時代の、jQuery1.4くらいの旧い書き方です。「成功したらさらに非同期通信をしたい」「失敗したら別の処理をしたい」等、他の処理が多くなるに連れてコールバック地獄に陥り、バグの温床となります。 もう辞めましょう。。。 イマドキの$.ajax()はこう書く イマドキは、jQueryのDeferredオブジェクトのth
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
