読者です 読者をやめる 読者になる 読者になる

僕のYak Shavingは終わらない

車輪の再発明をやめたらそこには壮大なYakの群れが

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

WEB+DB PRESS Vol.58

WEB+DB PRESS Vol.58


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

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

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

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

以下は新規作成

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

この辺は↓を参考にしました。
Ajax and jQuery Basics for Rails 3.1 and later | Notes

こんだけ。
はまらなければ一瞬でAjax化できる。うわぁ、うわぁ。

広告を非表示にする