Laravel・PHP入門

未経験エンジニアがRuby on Railsを学習していましたがPHPerになったメモ

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
 #表示するカテゴリー番号を取得
 end

 def 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'

 

ルートにこれ追加したら一応なんとかいけました。

f:id:fresh_engineer:20170806134151p:plain

 

できました !

 

f:id:fresh_engineer:20170806155457p:plain