Railsのajax処理で部分テンプレートのみ更新する方法が便利


railsで開発していると、ajaxで更新する処理を行うことがよくあります。

そんなとき、結果を受け取ってjQueryなどで値を操作して画面の一部分に更新内容を反映させるといった処理はよく行います。

そんなとき、一部の部分テンプレートだけ更新できれば便利だと思うことがよくあったのですが、そんな方法がちゃんと用意されていました。

今日はこの部分テンプレートのみ更新する処理について書こうと思います。

実はこの方法はcoffescriptにコードを書かなくてもすむ利点も有ります。Railsで開発を進めていると、Coffeescriptにコードを書くとコードが分断される感じがして、ちょっとやりづらい部分がありました。coffeescriptに処理を書かなくて済むためコードの可読性もあがるメリットもあります。

この方法のカギは、ajaxリクエストのレスポンスはjsファイルで受け取れるという点を使っています。これを知った時は目から鱗でした。




やり方は非常に簡単です。まずは、リクエスト処理、form_forやlink_toでremote: trueを指定します。これでajaxリクエストになりますね。

= link_to "更新", update_post_path(@post), method: :patch, remote: true

または

= form_for @post, update_post_path(@post),  remote: true do |f|
  ~~~

そしてcontrollerでは普通に処理を書きます。なんと、特にrenderの記述は必要ありません。

def update
  @post = Post.find(params[:id])

  @post.update_attributes(“name”, “hogehoge”)

  @post.save
end

そしてレスポンスを受け取るファイルを書きます。例えば、updateメソッドで処理した場合、通常はupdate.html.hamlなどのファイルを用意するのですが、ここでupdate.js.hamlとして、jsファイルでファイルを記載します。そしてこのjsファイル内で、部分テンプレートを呼び出せば、部分テンプレートのみが更新されるというわけです。

update.js.hamlファイルは以下の一行を書きます。

$(“#post”).html(“#{j(render ‘post_area')}")

これでOKです。

この行の意味は<div id=“post”>内を部分テンプレート_post_area.html.hamlの内容で置き換える

ということになります。

この方法を知ると、viewの表現方法が色々と広がります。
例えば、モーダルウインドウ内で一覧の検索結果の更新やページネーションなども出来たりします。

その辺はまた今度。
Rails便利ですね〜。