RailsのformにAjaxを実装する前提
RailsにjQueryを使ったAjaxを適用するために色々調べました。
個人的な備忘録として残します。
configを設定
config/application.rb
require File.expand_path('../boot', __FILE__)
module SampleApp
class Application < Rails::Application
config.action_view.embed_authenticity_token_in_remote_forms = true # 追加
end
end
コントローラーの変更
class HogesController < ApplicationController
def hoge
respond_to do |format|
format.html redirect_to hoge_path
format.js # ※下
end
end
end
config/application.rb
require File.expand_path('../boot', __FILE__)
module SampleApp
class Application < Rails::Application
config.action_view.embed_authenticity_token_in_remote_forms = true # 追加
end
end
class HogesController < ApplicationController
def hoge
respond_to do |format|
format.html redirect_to hoge_path
format.js # ※下
end
end
end
※ renderで指定しなければアクション名.js.erbを探す
テンプレートの変更
form_withを使っている場合（推奨）
form_withを使っている場合（推奨）remoteはデフォルトでtrueのでやることなし
（falseにしたい場合はlocal: trueを追加）
app/view/hoges/hoge.html.erb
<div id="ajax-test">
<%= form_with ... do |f| %>
<%= f.submit "hogehoge" %>
<% end %>
</div>
form_for, form_tagを使っている場合、
オプションにremote: trueを付ける。
app/view/hoges/hoge.html.erb
<div id="ajax-test">
<%= form_for ..., remote: true do |f| %>
<%= f.submit "hogehoge" %>
<% end %>
</div>
コントローラーでrenderしなかった場合、以下の点に注意してファイル.js.erbを追加
・適用したいテンプレートと同じ場所に配置
・ファイル名はコントローラーのアクション名と同じ名前に設定
app/view/hoges/hoge.js.erb
$("#ajax-test").html("<%= 'さあ、遠慮なく私をhogeりなさい！' %>");
記述はjQueryで。
.html("...");の部分を
.html("<%= escape_javascript(render('hoges/hoge')) %>");
.html("<%= j ( render('hoges/hoge') ) %>");でも可
などとすると色々できる。
Author And Source
この問題について(RailsのformにAjaxを実装する前提), 我々は、より多くの情報をここで見つけました https://qiita.com/yoshikouki/items/a3b1b15889c303423a0a著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .