ajaxの設定方法

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, '')) %>