ajax の利用方法
submitボタンありの場合
大きな流れは、view(html) → controller → view(js)
form_for タグ内で、 remote: true を付加する。
index.html.erb
<%= form_for @memo, remote: true do |f| %>
<%= f.text_field :text %>
<%= f.submit '投稿' %>
<% end %>
<ul>
<%= render @memos %>
</ul>
- remote で呼ばれたcontroller内で、render されるファイルは jsファイル 以下の場合、create.js.erbが呼び出される
-
<%= render @memos %>については、Viewでのrenderの使い方-その4-を参照
memos_controller.rb
class MemosController < ApplicationController
def create
Memo.create(memo_params)
@memos = Memo.all
end
end
create.js.erb
$("#memo_text").val(""); // 入力フォームを空欄にする処理
$("ul").html("<%= j(render @memos) %>");
-
<%= j(render @memos) %>は、<%= j(render :partial => 'memo', :collection => @memos) %>と同じ意味
submitボタンなしの場合
大きな流れは、view(html) → javascript → controller → view(html)
その１
search.html.erb
<!--- actionで指定しているresutlxx(controller) は、利用されない。 --->
<!--- url は、javascriptで指定 --->
<%= form_tag({ action: :resultxx }, remote: true) do %>
<%= select_tag("test", options_from_collection_for_select(
@books, :publish, :publish, ''), include_blank: true) %>
<span id="progress0"></span>
<% end %>
<ul id="result0"></ul>
cofeescript
$('#test').change 'ajax:success', (e, data) ->
$('#result0').empty()
# urlは、controller の search_result0アクション
$.ajax(
type: 'GET'
url: 'search_result00'
data: {
publish: $(this).val()
}
)
# ajax通信が成功した場合、renderする
.done (data) ->
$('#result0').html(data)
controller
def search_result00
sleep(2)
@books = Book.where(publish: params[:publish]).order(:title)
render action: "search_result0" # search_result0.html.erb の呼び出し
end
search_result0.html.erb
<ul>
<% @books.each do |book| %>
<li><%= book.title %></li>
<% end %>
</ul>
その2
search.html.erb
<!--- action resutlx1 ・ controller は利用されない。 --->
<!--- url は、javascriptで指定 --->
<%= form_tag({ action: :resultx1 }, remote: true) do %>
<%= select_tag("test1", options_from_collection_for_select(
@books, :publish, :publish, ''), include_blank: true) %>
<span id="result1">
<%= select("test2", "", "", include_blank: "発行を選択してください") %>
</span>
<% end %>
cofeescript
$('#test1').change 'ajax:success', (e, data) ->
$.ajax(
type: 'GET'
url: 'search_result1'
data: {
publish: $(this).val()
}
)
# ajax通信が成功した場合、renderする
.done (data) ->
$('#result1').html(data)
controller
def search_result1
sleep(2)
@books = Book.where(publish: params[:publish]).order(:title)
end
search_result1.html.erb
<%= select_tag("test2", options_from_collection_for_select(
@books, :title, :title, '')) %>