Rails3でAjaxでformのcallbackを指定するには

Rails3からの変更点でハマったのでメモ。

Rails2ではformをAjaxで送信するにはform_remote_tagを利用していた。
これがRails3では以下のように:remote => trueを指定することで実現する。

<%= form_tag(url_for(:action => 'create'), :remote => true, :id => "result_form") do %>
<% end %>

今は主にjQueryを使って開発している為、デフォルトで扱うjavascriptをjQueryに変更する。
Gemfileに以下記述

gem 'jquery-rails'

bundle installして関連ファイルをgenerate

$ bundle install
$ rails g jquery:install

jquery.jsとrails.jsを読み込むように設定
jquery.jsはgoogleから読み込み

#app/views/layouts/application.html.erb等に記述
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <%= javascript_include_tag 'rails' %>

formからのリクエストを受け取るcallbackをJavascriptファイルに設定

$(function($){
    $('#result_form')
        .bind("ajax:complete", function(){
           //ここに具体的な処理を記述
        });
});

他のステータスについても記述可能
それぞれ引数を受け取ることもできる。

$(function($){
    $('#result_form')
        .bind("ajax:loading", function(xhr){
           //ここに具体的な処理を記述
        })
        .bind("ajax:success", function(data, status, xhr){
           //ここに具体的な処理を記述
        })
        .bind("ajax:complete", function(xhr){
           //ここに具体的な処理を記述
        })
        .bind("ajax:failure", function(data, status, xhr){
           //ここに具体的な処理を記述
        });
});

処理を無名関数に記述できるのでRails2でのようにviewにゴチャっと書く必要がなくなり、より明確になったと思う。