RailsでAjax2

render :partialとremote_form_forのメモ。Rails的な書き方が分からなくてJavascriptで書いていた部分がすっきりしました。入力されたテキストを保存⇒表示するだけのサンプルです。

準備

ここら辺は適当に。

rails todo -d mysql
( database.yml, routes.rb の設定 )
script/generate controller main index
script/generate model todo name:string
rake db:migrate
script/server

実装

main_controller.rb

class MainController < ApplicationController
  def index
    @todos = Todo.find :all
  end
  
  def create
    if params[:todo] != nil
     	@todo = Todo.new params[:todo]
        @todo.save
    end

    if request.xml_http_request?
      render :partial => "todo", :locals => {:todo => @todo}
    else
      redirect_to :action => "index"
    end
  end
end

request.xml_http_request? を入れておくとJavascriptがOffの場合でもきちんと処理できるようです。有効な場合は部分的に書き換えを実施。

index.html.erb

<%= javascript_include_tag :defaults %>

<% remote_form_for :todo, @todo, 
  :url=>{:action=>"create"},
  :update => "todos",
  :position => :top do |f| %>

  <b>TODO :</b> <%= f.text_field :name %>
  <%= f.submit "作成" %>
<% end %>

<div id="todos">
<% for todo in @todos %>
  <%= render :partial => 'todo', :locals => {:todo => todo}  %>
<% end %>
</div>

_todo.html.erb

<%= h todo.name %><br />

remote_form_forで作成したフォームは非同期で実行されます。パラメタはちょっと端折ってますが、これで:updateで指定したIDの要素の最初（:top）に新規データが挿入されます。部分テンプレートは一行だけです。

ただ、remote_form_forでググっても約70件しかヒットしないんで、あまり使われてない（使えない？）のかなーと思ったり。