WEB+DB 詳解Ruby on Rails を流すその４ Ajaxで検索結果反映

作者: 松田明,大竹智也,はまちや2,外村和仁,横野巧也,島田慶樹,増井俊之,ミック,和田裕介,伊藤直也,塙与志夫,大沢和宏,原悠,浜本階生,uupaa,矢野りん,中島聡,中島拓,角田直行,WEB+DB PRESS編集部
出版社/メーカー: 技術評論社
発売日: 2010/08/24
メディア: 大型本
購入: 29人クリック: 338回
この商品を含むブログ (39件) を見る

前回
WEB+DB 詳解Ruby on Rails を流すその３検索機能追加 - 僕の車輪の再発明
WEB+DB 詳解Ruby on Rails を流すその２コメント機能追加 - 僕の車輪の再発明
WEB+DBの詳解Rails3を流す　その１ - 僕の車輪の再発明
kazuph/sample_rails_blog_app · GitHub

うわ、RailsのVersion差にはまったｗ
まあそれを確認するための学習なのでいいのだけれど。。。

検索結果描画のパーシャル化

え？パーシャル化ってなにかって？だって書いてあるんだもん・・・。
調べたら部分化とかそんな感じでした。

以下は新規作成

app/views/posts/_post.html.erb
  <tr>
    <td><%= post.title %></td>
    <td><%= post.body %></td>
    <td><%= link_to 'Show', post %></td>
    <td><%= link_to 'Edit', edit_post_path(post) %></td>
    <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
  </tr>

こっちも修正@posts.each要らなくなった・・・。

app/views/posts/index.html.erb
<table>
  <thread>
    <tr>
      <th>Title</th>
      <th>Body</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thread>

  <tbody id="posts">
    <% render @posts %>
  </tbody>
</table>

Ajax化

検索のform部分に:remote => trueを追加する

app/views/posts/index.html.erb
<%= form_for @search_form, :url => posts_path, :remote => true, :html => {:method => :get} do |f| %>

jsはerbに書けばいいらしいけど、記事ではjQueryじゃなかったので自分で書いた。

app/views/posts/index.js.erb
$('#posts').replaceWith('<tbody id="posts"><%= escape_javascript(render(@posts)) %></tbody>');

あとこれは載ってなかったのでもしかしたらVersion差の部分かなと思う。

app/controllers/posts_controller.rb
class PostsController < ApplicationController
  # GET /posts
  # GET /posts.json
  def index
    @search_form = SearchForm.new params[:search_form]
    @posts = Post.scoped
    
    if @search_form.q.present?
      @posts = @posts.title_or_body_matches @search_form.q
    end

    respond_to do |format|
      format.html # index.html.erb
      format.json { render json: @posts }
      format.js #add
    end
  end
...
end