[Ruby on Rails 4] Rails における Ajax 処理のシンプルなチュートリアル
シンプルな例を実装してみる。
[markdown]
こちらを参考にさせて頂きました。
> Rails では、link_ to, form_ tag（form_ for）などのビューヘルパーが Ajax 通信のための機能を提供している。
売り上げランキング: 25,524
`items` を `scaffold` した後に、その検索機能を追加する体。
## Controller
Controller を用意する。
“`ruby:config/routes.rb
Rails.application.routes.draw do
resources :items do
collection do
get ‘search’
post ‘result’
:
“`
プレイスホルダ（`?`）を利用して、条件式を生成する。
“`ruby:app/controllers/items_controller.rb
class ItemsController < ApplicationController
# GET /items/search
def search; end
# POST /items/result
def result
target_columns = 'name, title, description'
@results = Item.where("CONCAT(#{target_columns}) LIKE ?", "%#{params[:keyword]}%")
end
:
``` 複数カラムを対象とする検索の実装が Rails 的に `CONCAT` でベストなのかは自信なし。 > * [Active Record クエリインターフェイス | Rails ガイド](https://railsguides.jp/active_record_querying.html)
> * [逆引きSQL構文集 – 文字列を連結する(CONCATENATE, CONCAT, +, ||)](http://www.sql-reference.com/string/concatenate.html)
## View
search テンプレートにフォームを用意する。
`remote: true` で Ajax 対応する。
`id=result` 要素に結果を返す。
“`haml:app/views/items/search.html.haml
= form_tag({ action: ‘result’ }, remote: true) do
= text_field_tag(:keyword)
= submit_tag ‘Search’
#result
“`
Ajax で呼び出される result テンプレート（`.js.haml`）を用意する。
`j` で `escape_javascript` する。
“`haml:app/views/items/result.js.haml
$(‘#result’).html(“#{j(render ‘items/search_result’)}”);
“`
結果表示用の子テンプレートを用意する。
“`haml:app/views/items/_search_result.html.haml
%h2 Search result
– if @results.present?
%ul
– @results.each do |result|
%li= link_to “#{result.id}, #{result.title}”, result
– else
%p No items found.
“`
次に、これを RSpec でテストする。
> * [Rails の Ajax 処理を RSpec でテストする | deadwood](https://www.d-wood.com/blog/2017/04/26_8917.html)
## 補遺
* [Rails で JavaScript を使用する | Rails ガイド](https://railsguides.jp/working_with_javascript_in_rails.html)
[/markdown]