,

[Ruby on Rails 4] Rails における Ajax 処理のシンプルなチュートリアル

公開日: 2017/04/25
更新日: 2018/10/05

シンプルな例を実装してみる。

こちらを参考にさせて頂きました。

Rails では、link_ to, form_ tag（form_ for）などのビューヘルパーが Ajax 通信のための機能を提供している。

Ruby on Rails 4アプリケーションプログラミング
Ruby on Rails 4アプリケーションプログラミング

posted with amazlet at 17.04.25
技術評論社 (2014-04-28)
売り上げランキング: 25,524
Amazon.co.jpで詳細を見る

items を scaffold した後に、その検索機能を追加する体。

Controller

Controller を用意する。

config/routes.rb
Rails.application.routes.draw do
  resources :items do
    collection do
      get 'search'
      post 'result'
    :

プレイスホルダ（?）を利用して、条件式を生成する。

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 でベストなのかは自信なし。

View

search テンプレートにフォームを用意する。

remote: true で Ajax 対応する。
id=result 要素に結果を返す。

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 する。

app/views/items/result.js.haml
$('#result').html("#{j(render 'items/search_result')}");

結果表示用の子テンプレートを用意する。

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 でテストする。

補遺