【Ruby】Ruby on Rails で 初心者がAjaxを使ってみる
【やりたいこと】
カテゴリーを変更すれば、Ajaxが 対応するカテゴリーのitem を取得し表示する。
※itemの部分のみが変更されるので、ページ変遷しない
【イメージ】
表示:ajax/search.html.erb
category1〜3で選択する
→api/controllers/ajax.controllerが呼び出される
→projectモデルがprojectsテーブルからデータ取得する
→選択したcategory_id=?のデータを表示する
※一旦シンプルに考えるためにアソシエーション無視して
category_idで同テーブルのデータを使用することとします
まずはコントローラを作成、その後必要なビューとかを作ります。
部分テンプレートを使用しました。
部分テンプレートを使用すると
ファイル名の先頭に「 _ 」をつけるという制限があるので、
今回は下記の通りファイルを作成しました。
・controllers/ajax_controller.rb #rails g controller ajax
・view/ajax/search.html.erb
・view/ajax/result.js.erb
・view/ajax/_search_result.html.erb
ajax_controller.rb
class AjaxController < ApplicationController
def search
@projects = Project.select(:category_id).distinct
#表示するカテゴリー番号を取得
enddef result
@projects = Project.where(category_id: params[:category_id])
#指定されたカテゴリーIDでprojectsテーブルを検索
end
end
search.html.erb
<%= form_tag({ action: 'result' }, remote: true) do %>
#view helperのform_tagは
#remoteオプションでsubmit時に非同期通信
<%= select_tag(:publish, options_from_collection_for_select(
@projects, :category_id, :category_id, '1')) %>
#option_from_collection_for_select = 選択肢をDBから生成するメソッド
<%= submit_tag '検索' %>
<% end %><ul id="result"></ul>
#結果を反映する
_search_result.html.erb(部分テンプレート)
<% @projects.each do |project| %>
#取って来たproject itemを1つずつ下記project.titleへ出力
<li><%= link_to project.title,
'http://aaa.aa.aaa.aa/index' %></li>
<% end %>
result.js.erb(部分テンプレートが作った結果をJavaScriptで応答)
$('#result').html(
"<%= escape_javascript(render 'search_result') %>")
#受け取った結果をhtmlファイルへ変換
route.rb
get '/ajax/result'
post '/ajax/result'
get '/ajax/search'
post'/ajax/result'
ルートにこれ追加したら一応なんとかいけました。
できました !