[Ruby on Rails]一部分のテンプレートを更新する方法[Ajax]

Railsでよく使う部分更新をメモる

今回の例は
あらかじめ保存されている本のタイトルを入力すると検索されてプルダウンに反映されるという内容です。
テキストボックスに検索内容を入力するとchangeイベントが発火して
プルダウンリストのみ更新します。

ではモデルから
Bookモデルはtitleエンティティのみ存在します。

class Book < ActiveRecord::Base
end

1 2	class Book < ActiveRecord::Base end

routes.rbに以下内容追加

resources :books
get '/books/change_list/:word', to: 'books#change_list'

1 2	resources :books get '/books/change_list/:word', to: 'books#change_list'

_from.html.erbのフォーム内容

<%= form_for(@book) do |f| %>
<div class="field">
<%= f.label :title %><br>
<%= text_field_tag :seach %>
<div id="result_select">
<%= render partial: 'result', locals: { books: @books } %>
</div>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>

<%= form_for(@book) do |f| %>

<%= f.label :title %><br>

<%= text_field_tag :seach %>

<%= render partial: 'result', locals: { books: @books } %>

</div>

<%= f.submit %>

</div>

<% end %>

_result.html.erbが非同期で更新されるプルダウンになります。
collection_select :モデル, :項目, プルダウンリスト, :プルダウンリストのvalue, :プルダウンリストの表示内容

<%= collection_select :book, :title, books, :title, :title  %>

1	<%= collection_select :book, :title, books, :title, :title %>

book.coffeeでプルダウンの内容を書き換えます。

$(document).on 'change', '#seach', ->
$.ajax(
type: 'GET'
url: '/books/change_list/' + $(this).val()
).done (data) ->
$('#result_select').html(data)

$(document).on 'change', '#seach', ->

$.ajax(

type: 'GET'

url: '/books/change_list/' + $(this).val()

).done (data) ->

$('#result_select').html(data)

books_controller.rbのchange_listアクションで内容がレンダリングされます。

def change_list
render partial: 'result', locals: { books: Book.where('title like' + " '%" + params[:word] + "%'") }
end
# GET /books/new
def new
@book = Book.new
@books = Book.all
end
# GET /books/1/edit
def edit
@books = Book.all
end

def change_list

render partial: 'result', locals: { books: Book.where('title like' + " '%" + params[:word] + "%'") }

end

# GET /books/new

def new

@book = Book.new

@books = Book.all

end

# GET /books/1/edit

def edit

@books = Book.all

end

あとがき

まぁ使えるか微妙ですが、メモってことで

参考
Railsで連動プルダウン

あとがき

関連