Rails で Ajax を使ってみる

デフォルトで、prototype.js や scriptaculous.js の effects.js、dragdrop.js などに対応しているようです。
これは試してみないといけないなと思い少し触ってみました。

まず、JSファイルを読み込ませます。

  <%= javascript_include_tag :defaults %>

これだけでOK。
指定したJSファイルだけ使用したい場合には「:defaults」の代わりにJSファイル名を指定すればよいみたい。

  <%= javascript_include_tag 'prototype' %>

みたいな感じで。

では、scaffold で生成したソースで実際動かしてみます。
ビューから修正していきます。

<% @people.each do |person| %>
<tr>
  <td><%=h person.name %></td>
  <td><%=h person.age %></td>
  <td><%= link_to_remote 'Show', :url => {:action => 'update_detail', :id => person.id}, :method => :get %></td>
  <td><%= link_to 'Edit', edit_person_path(person) %></td>
  <td><%= link_to 'Destroy', person, :confirm => 'Are you sure?', :method => :delete %></td>
</tr>    
<% end %>

〜 略 〜

<div id="detail_name"></div>
<div id="detail_age"></div>

今回、まずは"link_to_remote" を試しました。

<%= link_to_remote 'Show', :url => {:action => 'update_detail', :id => person.id}, :method => :get %>

この部分で、非同期通信をします。
div の "detail_name"、"detail_age"のinnerHTMLを書き換えます。

次にコントローラです。
上記リンクの":action" に指定した 'update_detail' に対応したメソッドを用意します。

  def update_detail
    @person = Person.find(params[:id])
    render :update do |page|
      page[:detail_name].replace_html(@person.name)
      page[:detail_age].replace_html(@person.age)
    end
  end

さてリンクを押下してみましょう。

できました。
こういうの、Javaにも欲しいな。