mk-mode BLOG

このブログは自作の自宅サーバに構築した Debian GNU/Linux で運用しています。
PC・サーバ構築等の話題を中心に公開しております。(クローンサイト: GitHub Pages

ブログ開設日2009-01-05
サーバ連続稼働時間
Reading...
Page View 合計
Reading...
今日
Reading...
昨日
Reading...

Ruby on Rails - jQuery で Ajax 処理の callback 判定!

[ プログラミング ] [ Ajax, JavaScript, Rails, Ruby, jQuery ]

こんばんは。

Ruby on Rails + jQuery で Ajax 処理を行う際に、そのステータスにより処理を振り分ける必要があるケースもあります。

その方法についての備忘録です。

0. 前提条件

  • Rails 4.1.0 での作業を想定。
  • jQuery 導入済みであることを想定。

1. 準備

以下のような View テンプレートがあるとする。(説明用に簡素な例)
(Form 内の Submit ボタン押下でメソッド hoge Controller, fuga Action を Ajax 呼び出しする)

app/views/hoge/fuga.html.erb
1
2
3
<%= form_tag({controller: "hoge", action: "fuga"}, {id: "frm-search", data: {remote: true}}) do %>
  <%= submit_tag("検索", name: nil) %>
<% end %>

(古いバージョンの Rails では記述が若干異なるので注意)

2. jQuery スクリプト作成

以下のような jQuery スクリプトを作成する。(ファイル名は任意)

app/assets/javascripts/my_custom.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function($){
    $('#frm-search')
        .bind("ajax:beforeSend", function(jqXHR, settings){
           // Ajax リクエスト送信前の処理
        })
        .bind("ajax:complete", function(jqXHR, textStatus){
           // Ajax リクエスト完了時の処理
        })
        .bind("ajax:error", function(jqXHR, textStatus, errorThrown){
           // Ajax リクエスト失敗時の処理
        });
        .bind("ajax:success", function(data, textStatus, jqXHR){
           // Ajax リクエスト成功時の処理
        })
});

function の Callback 引数は使用しないならなくてもよい。

各 Callback 引数の意味は以下のとおり。

  • jqXHR : XMLHTTPRequest object.
  • settings : PlainObject setting data.
  • textStatus : Status string
  • errorThrown : Error string
  • data : PlainObject data

ちなみに、新しい jQuery なら bind の代わりに on を使用してもよいだろう。
livedelegate でもよいだろう。(書式に注意)

3. 使い道

当方は、あるボタン押下時に jQuery の blockUI プラグインで画面をロックして Ajax 処理を行い、Ajax 処理が完了した時点で blockUI のロックを解除する、といった使い方をしている。

4. 参考サイト


HTML だけでは実現不可能な場合に JavaScript の恩恵を感じますが、 jQuery は更に恩恵を感じる今日この頃です。
サーバサイドの JavaScript にも興味があるので、機会があれば。。。

以上。

Comments