jQueryでAjaxの通信開始/終了のイベントをハンドリングする方法

やりたいこと

jQueryでAjaxの通信開始/終了のイベントをハンドリングし、Ajaxによる通信中であることがユーザに分かるようにしたい。

方法

jQueryのajaxStart/ajaxCompleteメソッドを使用する。

• JSファイルにAjaxの通信開始/終了時の処理を記載。
  ※application.jsに記載するとアプリ全体に有効になる。

$ vi app/assets/javascripts/application.js

$(function() {
    // なぜかサンプルにあった$('*')では要素の取得ができなかったのでこちらで。
    $(document)
    .ajaxStart(function() { $('#processing').html('通信中...') })
    .ajaxComplete(function() { $('#processing').html('') })
});

• JSファイルで指定している要素をViewに追加

$ vi app/views/chapters/show.html.erb

<div id='processing'>
</div>

参考サイト

• 特に無し