製品一覧

製品の足場を作成、製品は名称と価格を持つ。

rails _4.2.0_ new store
cd store
rails g scaffold product name price:integer
rake db:migrate

ルートのルーティングを製品一覧に設定する。

config/routes.rb

root 'products#index'

コントローラーなどの確認。製品を新規作成、編集する。

view app/controllers/products_controller.rb
view app/views/products/index.json.jbuilder
rails s

製品にリリース日を追加する。

rails g migration add_released_on_to_products released_on:date
rake db:migrate
rails s

ビューにリリース日を追加してもStrongParametersにより保存されない。
scaffold_controllerで衝突するファイルの差分を確認する。

rails g scaffold_controller product name price:integer released_on:date

製品名で検索

名前が部分一致した製品を表示する。

app/models/search_form.rb

class SearchForm
  include ActiveModel::Model

  attr_accessor :q
end

検索フォームを追加する。

app/views/products/index.html.erb

<%= form_for @search_form, url: products_path, html: { method: :get } do |f| %>
  <%= f.search_field :q %>
  <%= f.submit '検索' %>
<% end %>

<h1>Listing products</h1>

app/controllers/products_controller.rb

class ProductsController < ApplicationController
  before_action :set_product, only: [:show, :edit, :update, :destroy]

  # GET /products
  # GET /products.json
  def index
    @search_form = SearchForm.new params[:search_form]
    @products = Product.all
    if @search_form.q.present?
      @products = @products.named @search_form.q
    end
  end

app/models/product.rb

class Product < ActiveRecord::Base
  scope :named, ->(q) { where 'name like ?', "%#{q}%" }
end

検索をAjax化

全製品がテーブルで用意されている画面について、検索結果を受けて、項目行を表示／非表示する。

検索条件を入力、製品一覧を Ajax 呼び出し、JSONフォーマットで結果を取得、該当する製品を表示する。
まず、content_tag_for を用いて <tr> に ID を追加し、項目行を指定可能にする。

app/views/products/index.html.erb

  <tbody>
    <%= content_tag_for :tr, @products do |product| %>
      <td><%= product.name %></td>
      <td><%= product.price %></td>
      <td><%= product.released_on %></td>
      <td><%= link_to 'Show', product %></td>
      <td><%= link_to 'Edit', edit_product_path(product) %></td>
      <td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td>
    <% end %>
  </tbody>

Ajax化した検索に成功した場合、検索結果（引数 products）に含まれる ID だけを表示する。

app/assets/javascripts/products.coffee

ready = ->
  $('#new_search_form').on 'ajax:success', (event, products, status) ->
    $('tr.product').hide()
    ids = (products.map (p) -> "#product_#{p.id}").join(',')
    $(ids).show()

$(document).ready(ready)
$(document).on('page:load', ready)

検索結果（JSONフォーマットで呼ばれた場合）として、product の ID を返す。

app/views/products/index.json.jbuilder

json.array!(@products) do |product|
  json.extract! product, :id
end

Ajax を用いて製品一覧を検索する。（ /products.json にアクセス）

app/views/products/index.html.erb

<%= form_for @search_form, url: products_path(format: :json), html: { method: :get }, remote: true do |f| %>

（参考）rails consoleで app.products_path(format: :json) と入力すると、展開されたパスを確認できる。

Rails 4.2 写経用サンプルアプリ

製品一覧

製品名で検索

検索をAjax化