BackEnd

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

投稿日:

はじめに

RailsでAjax処理で画面を更新する方法を簡単に紹介します。

View(遷移元)の設定

link_toやform_forなどで remote: true を指定します。
(下記の例ではusers_controller.rbのupdateアクションが実行されます)

Controllerの実装

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

View(遷移先)の実装

update.js.erbファイルにJavaScriptの処理を書いていきます。
.attrなどで個別に要素を変更するだけでなく、下記のようにpartialとして切り出したテンプレートを指定して画面を更新することもできます。

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

また、上記のようにAjaxで遷移した場合redirect_toでリダイレクトできません。
更新失敗などの時にリダイレクトしてたい場合は、下記のようにするとできます。

参考

http://qiita.com/mm36/items/684f36f22e79d0a27ae9
http://qiita.com/geshi/items/536956b8bed7c2126187

さいごに

RailsでAjax処理で画面を更新する方法を簡単に紹介しました。

blog-page_footer_336




blog-page_footer_336




-BackEnd
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

laravel logo

Deployerで複数の環境やサーバにデプロイするには

1 はじめに2 hosts.ymlファイルの作成3 プロダクション・ステージング環境を分ける3.1 ymlファイルの記載3.2 デプロイコマンド4 複数台のサーバに同時リリースする4.1 ymlファイ ...

laravel logo

コードでわかるLaravelのブラウザ認証

1 はじめに1.1 認証機能の概要2 Controller3 SessionGuard3.1 fireAttemptEvent3.2 retrieveByCredentials3.3 hasValid ...

laravel logo

DeployerでLaravelをデプロイ! 初期設定〜レシピのカスタマイズまで

1 はじめに2 Deployerの導入2.1 前提条件2.2 インストール3 デプロイの設定3.1 デプロイスクリプト3.2 サーバサイドの設定3.3 デプロイコマンド3.4 Deployerのディレ ...

laravel logo

Laravelのブラウザテスト「Dusk」で非同期で重たい処理のテストを実装してみよう

1 はじめに2 JavaScriptの式で待機する2.1 テスト対象となるコード2.2 Duskのテストコード3 DOM要素の表示を待つ3.1 テスト対象となるコード3.2 Duskテストコードの実装 ...

laravel logo

Laravel SailでDocker環境構築

1 はじめに2 Laravel Sailの基本2.1 Dockerの構成2.2 コンテナの起動・停止2.3 sailで使用できるコマンド3 Laravel Sailの設定3.1 ポートフォワードの設定 ...

フォロー

blog-page_side_responsive

2018年1月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。