RailsでAjaxをちゃんと動かしたい

Question

Railsでrailsとjsを使ったお手軽「いいね♡機能」をみながら、「いいね♡機能」を実装しているのですが、[いいね!ボタン]を押したあとにリロードしなければ画面が変化しません。Ajaxでリロードなしで変更できるようにしたいのですが、Rails側でエラーが出ているのですが、解決できません。。

エラーメッセージ

  Rendered likes/_like.html.erb (270.1ms)
  Rendered likes/create.js.erb (288.5ms)
Completed 500 Internal Server Error in 381ms (ActiveRecord: 21.7ms)

ActionView::Template::Error (undefined local variable or method `micropost' for #<#<Class:0x007f902c142940>:0x007f90284f6658>):
    1: <% if logged_in? %>
    2:   <% if micropost.like_user(current_user.id) %>
    3:     <%= button_to micropost_like_path(micropost_id: micropost.id, id: 1), method: :delete, id: "like-button", remote: true do %>
    4:       <%= image_tag("hot.png", style: "width: 20px;") %>
    5:       <span>

###該当するソースコード

_like.html.erb

<% if logged_in? %>
  <% if micropost.like_user(current_user.id) %>
    <%= button_to micropost_like_path(micropost_id: micropost.id, id: 1), method: :delete, id: "like-button", remote: true do %>
      <%= image_tag("hot.png", style: "width: 20px;") %>
      <span>
        <%= micropost.likes_count %>
      </span>
    <% end %>
  <% else %>
    <%= button_to micropost_likes_path(micropost),id: "like-button", remote: true do %>
      <%= image_tag("not.png", style: "width: 20px;") %>
      <span>
        <%= micropost.likes_count %>
      </span>
    <% end %>
  <% end %>
<% else %>
  <%= image_tag("not.png") %>
  <span>
    <%= micropost.likes_count %>
  </span>
<% end %>

create.js.erb

$("#like-buttons").html("<%= j(render partial: 'like', locals: { microposts: @microposts, likes: @likes, like: @like}) %>")

destroy.js.erb

$("#like-buttons").html("<%= j(render partial: 'like', locals: { microposts: @microposts, likes: @likes }) %>");

likes_controller.rb

class LikesController < ApplicationController
  def create
    @like = Like.create(user_id: current_user.id, micropost_id: params[:micropost_id])
    @likes = Like.where(micropost_id: params[:micropost_id])
    @microposts = Micropost.all
  end

  def destroy
    like = Like.find_by(user_id: current_user.id, micropost_id: params[:micropost_id])
    like.destroy
    @likes = Like.where(micropost_id: params[:micropost_id])
    @microposts = Micropost.all
  end
end

すみませんがどうぞ宜しくお願い致します。

Answer 1

参照先URLのすべてのソースを見たわけではないですが、エラーが発生している原因は、
_like.html.erbパーシャルにmicropost変数を渡していないからですね。
（現実装では、渡しているのは、micropostsだが、パーシャル内で利用しているのはmicropost）
そのため、DBに対する保存は完了しているが、Ajax処理がこけているという状況かと思います。

パーシャルに対する理解がわからなければ、
http://qiita.com/shizuma/items/1c655dadd2e04b3990a8
を見ておくとよいと思います。

ちなみに参照先のURLの実装にも同様のミスが見つかりました。その他にも、いくつか不可解な部分があります。完全にトレースした訳ないですが、おそらくこの投稿のまま実装しても動かないですね。
・views/likes/create.js.erbで$("#like-buttons")というhtml要素を書き換えているが、このlike-buttonsとは？？？命名からするとすべてのいいねボタンと見受けられるが、ajaxで再描画するのは一ついいねボタンだけで良いはず。
・partial内で利用しているのはtweetだが、渡しているのはtweets
・create, destroyともに@tweetsや@likes、@likeは不要なはず
といったところです。

micropostsを表示している一覧ページがありますよね？（そしてその中にいいねボタンがあると思うのですが）
もしよければ、そこのerbテンプレートを貼ってみてください。修正方針が伝えられるかも。

<以下追記>

_micropost.html.erbを以下のようにしてみてください。
likeパーシャルをなんでも良いのでタグで囲ってそこにIDを付与します

<li id="<%= micropost.id %>">
<%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>
<span class="user"><%= link_to micropost.user.name, micropost.user %></span>
<span class="content"><%= micropost.content %></span><br />
<span class="rate rate-<%= micropost.rate %>"></span><br />
<span class="type"><%= micropost.type %></span><br />
<span class="case"><%= micropost.case %></span><br />
<span class="timestamp">
Posted <%= time_ago_in_words(micropost.created_at) %> ago.
<% if current_user?(micropost.user) %>
<%= link_to "delete", micropost, method: :delete,
data: { confirm: "You sure?" } %>
<% end %>
</span>
<!-- 変更ここから -->
<span id="like-of-<%= micropost.id %>">
  <%= render partial: 'likes/like', locals: { micropost: micropost } %>
</span>
<!-- 変更ここまで -->
</li>

次に、create.js.erb, destroy.js.erbを変更します
・上記のID変更に対応
・partialに渡す変数を修正
どちらも同じで通ると思います。

$("#like-of-<%= @micropost.id %>").html("<%= j(render partial: 'like', locals: { micropost: @micropost}) %>")

最後に作成したerbに合わせてコントローラーを修正します

class LikesController < ApplicationController
  def create
    # micropostを取得します。（before_actionをしっていたら共通化しましょう）
    @micropost = Micropost.find(params[:micropost_id])

    @like = Like.create(user_id: current_user.id, micropost_id: params[:micropost_id])

    # 以下は多分必要ないので削除
    # @likes = Like.where(micropost_id: params[:micropost_id])
    # @microposts = Micropost.all
  end

  def destroy
    # micropostを取得します。（before_actionをしっていたら共通化しましょう）
    @micropost = Micropost.find(params[:micropost_id])

    like = Like.find_by(user_id: current_user.id, micropost_id: params[:micropost_id])
    like.destroy

    # 以下は多分必要ないので削除
    # @likes = Like.where(micropost_id: params[:micropost_id])
    # @microposts = Micropost.all
  end
end

Comments

[marutama_giant]

回答をありがとうございます。試行錯誤してもできなかったので助かります。
_micropost.html.erbで様々なところに呼び出しているのですが、下記が_micropost.html.erbになります。
<li id="<%= micropost.id %>">
<%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>
<span class="user"><%= link_to micropost.user.name, micropost.user %></span>
<span class="content"><%= micropost.content %></span><br />
<span class="rate rate-<%= micropost.rate %>"></span><br />
<span class="type"><%= micropost.type %></span><br />
<span class="case"><%= micropost.case %></span><br />
<span class="timestamp">
Posted <%= time_ago_in_words(micropost.created_at) %> ago.
<% if current_user?(micropost.user) %>
<%= link_to "delete", micropost, method: :delete,
data: { confirm: "You sure?" } %>
<% end %>
</span>
<!-- like拡張機能 -->
<%= render partial: 'likes/like', locals: { micropost: micropost, likes: @likes } %>
</li>

[h_daido]

試す環境がないので、机上ではありますが、デバッグしました。
回答本文に追記しているので見てみてください。

試せてないのでエラーでちゃうかもですけど、そしたらまたコメントください。

[marutama_giant]

ありがとうございます。とりあえず、トライしてみます。結果をご報告させていただきます。取り急ぎ失礼いたします。

[marutama_giant]

できました。ありがとうございます
完璧な回答でした、

[h_daido]

よかったです！
余裕があれば引用元のQitaにコメントしておくと良いかなと思います。

[marutama_giant]

http://qiita.com/YuitoSato/items/94913d6a349a530b2ea2
こちらQiitaにコメントしておきました。いろいろとありがとうございます。

[TakashiOda]

同じ問題に苦しんでいたものですが、おかげさまでうまくいきました。
ちなみに一つ質問があるのですが。
_micropost.html.erb　内で

<span id="like-of-<%= micropost.id %>">
<%= render partial: 'likes/like', locals: { micropost: micropost, likes: @likes } %>
</span>

とありますが、likes: @likes の部分は必要あるのでしょうか？
内部で使われていない気がするのですが・・・
もしくは私が初学者なので、私の知識と理解が追いついていないだけなのかどうなのかが気になります。

[h_daido]

> TakashiOdaさん
たしかに必要ないですね！

[TakashiOda]

ご返答ありがとうございました！