このエントリーをはてなブックマークに追加

2016年12月14日水曜日

RailsでAjax処理で画面を更新する

こんにちは。h_ono_222です。
RailsでAjax処理で画面を更新する方法を簡単にまとめます。

1. View(遷移元)の設定

link_toやform_forなどで remote: true を指定します。
(下記の例ではusers_controller.rbのupdateアクションが実行されます)
<%= form_for @user, method: :patch, remote: true do |f| %>

2. Controllerの実装

コントローラーでは特別な処理はありません。
通常通りの更新処理を書きます。

3. View(遷移先)の実装

update.js.erbファイルにJavaScriptの処理を書いていきます。
.attrなどで個別に要素を変更するだけでなく、下記のようにpartialとして切り出したテンプレートを指定して画面を更新することもできます。
$('#user_status').html("<%= j (render 'users/status') %>");
このようにすると、id="user_status"の子要素としてレンダリングしてくれます。

partialとして切り出したテンプレート内のidを指定してしまうと、Ajax遷移するたびにどんどんネストされていくので注意が必要です。

また、上記のようにAjaxで遷移した場合redirect_toでリダイレクトできません。
更新失敗などの時にリダイレクトしてたい場合は、下記のようにするとできます。
window.location.replace('<%= users_path %>');

参考


0 件のコメント:

コメントを投稿