Ruby on Rails3でlink_toでAjax処理

rails3でlink_toタグを使ってAjaxを利用する場合のメモ書きです。

実行環境はruby1.9.3p0,rails3.2.2,postgres

難易度★★★☆☆

rail3でajax処理をおこなう時に一番困ったのが、ググるとremote_functionタグを使ったやり方が多かったことです。
この機能はrail2.Xまでは一般的だったらしい(知らないけど)のですが、remote_functionタグはrails3では利用できません。

色々と調査したのですが、rails3ではjqueryを使ってajax処理を行うのがよいみたいです。以下に実装してみました。

jqueryの導入

アプリケーションフォルダ配下のGemfileにjqueryの記述を追記します。

vi Gemfile

gem 'jquery-rails'

保存したらjqueryファイルをインストールします。

bundle install

rails generate jquery:install

上記のコマンドでjqueryのファイルがpublicフォルダにinstallされます。
[jquery_ujs.js],[jquery.js],[jquery.min.js]がありますが、最初に読み込むファイルはjquery_ujs.jsにする必要があります。

なので、デフォルトで読み込まれるJavaScriptファイルを設定するためにconfig/application.rbを編集します。

config.action_view.javascript_expansions[:defaults] = %w(jquery.min jquery_ujs)

これで読み込めるようになります。あとはviewでファイルを読み込めるようにします。

<%= javascript_include_tag :defaults %>

これでjqueryが利用できるようになります。
application.jsファイルにサンプル関数でalert("hello ruby jquery")とでも記述して動作を確認してください。
動作しない場合は、pathの設定やファイルの名前をよく調べてみましょう。

link_toの設定

続いてリンクを作成します。viewにlink_toタグを記述します。

<%= link_to "リンク名称", {}, :onclick=> "test(1);return false;" %>

上記のようにタグを記述すると、以下のようなhtmlタグが出力されます。

<a href="/home/main" onclick="test(1);return false;">リンク名称</a>

hrefの内容は無視して構いません。重要なのはonclickの内容です。上記では、リンククリック時に関数test()が呼び出されます。
というわけでtest関数に処理の内容を記述します。

ajax処理を利用した関数

では、上記で設定した関数testを記述しましょう。
関数はなるべくjsファイルに記述しましょう。

function test(test_id) {
  $.ajax({
        url: "/home/test", 
        type: "POST", 
        data: 'test_id=' + test_id + '&authenticity_token=' + $('#authenticity_token').val(),
        success: function(data) {

        },
        error: function() {
          alert("通信エラーが発生しました。時間をおいてもう一度操作をおこなってください。") 
        }
   })
}

url:コントローラーとメソッドを指定しています。上記の例ではHomeControllerのtestメソッドが呼び出されます。
type:データの送信方法。POSTを指定してます。
data:HomeControllerのtestメソッドに送るパラメーターです。authenticity_tokenはhidden_tagを利用して埋め込んで取得します。
これを送らないとエラーになるので注意してください。

さて次はrails側の処理を記述します。

コントローラーの処理とjs.erbファイルとrbファイルの作成

関数を記述したら次はrailsのコントローラーの処理を記述します。
/home/testなのでHomeControllerにtestメソッドを記述します。

  def test
    // something
  end
  

このメソッドを通過後、test.js.erbが呼び出されます。
test.erbではなく、test.js.erbファイルであることに注意してください。
中身は行いたい内容によって変化しますが、idタグを設定して内容を書き換えるのが一般的でしょう。

$('#test_id').html("<%= escape_javascript(@test_name) %>");
$('#test_id2').html("<%= escape_javascript(render :partial => 'test_data_list') %>");
  

更新コンテンツの生成は、部分テンプレートにコードを記述しましょう。
.js.erbファイルにはページ更新のためだけのコードを上記のように記載しましょう。
上記の例だと、_test_data_list.erbが部分テンプレートになります。

終わりに

rails3とjqueryの相性はなかなか良いと思います。
ただ、ある程度jqueryの知識がないと処理が書けないのは苦しいところです。
coffeeScriptとかで記述している人もいるし、この編の覚えることの多さと敷居の高さはrailsに今後づっとつきまとう課題でしょうね。

こんな感じです。でわ

この記事がお役にたちましたらシェアをお願いします

Tweet