【至急】Ajaxがリロードしないと機能しない。

Question

現状
railsチュートリアルに沿って、アプリケーション開発をしています。いいね機能を搭載し、ajaxをつけてようとしているのですが、リロードしないと表示が変わりません。submitのボタンを押すと、その場では何も変化がないような挙動をし、リロードすると、いいね機能が実行され、画面にも変化が現れる状態です。以下に、関連していると思われるコードを載せておきます。ネット上にあるサイトを参考にして、turbolinksのgem,jsでの読み込みをコメントアウトしてあります。ほかに必要な情報があれば、手間をおかけしますがよろしくお願いします。読みづらいコードかもしれませんが、どうかよろしくお願いいたします。
エラーコード

ActionView::Template::Error (undefined local variable or method `micropost' for #<#<Class:0x00000000051a4bb8>:0x00000000051d2888>
Did you mean?  micropost_url)

上記のエラーは、create.js.erb,destroy.js.erbの両方に見られます。
_micropost.html.erb内でeach文を使用して、@microposts.each do |micropost|としているのですが、jsファイルにはこのmicropostが検知されず、このエラーが出てしまっているのでしょうか？
コード

(favorites_controller.rb)

def create
    @micropost = Micropost.find_by(id: params[:micropost_id])
    current_user.like(@micropost)
    respond_to do |format|
      format.html { redirect_back(fallback_location: root_path) }
      format.js
    end
  end

  def destroy
    @micropost = Micropost.find(params[:micropost_id])
    current_user.unlike(@micropost)
    respond_to do |format|
      format.html { redirect_back(fallback_location: root_path) }
      format.js
    end
  end

(favorites/_like_button.html.erb)

<%= form_for(current_user.favorites.build, remote: true) do |f| %>
  <%= hidden_field_tag :micropost_id, micropost.id %>
  <%= button_tag :type => "submit", :class => "star icon" do %>
    <i class="fa fa-star-o" id="likes"><%= micropost.like_users.count %></i>
  <% end %>
<% end %>

(favorites/_unlike_button.html.erb)

<%= form_for(current_user.favorites.find_by(micropost_id: micropost.id),
             html: { method: :delete },
             remote: true) do |f| %>
  <%= hidden_field_tag :micropost_id, micropost.id %>           
  <%= button_tag :type => "submit", :class => "star icon" do %>
    <i class="fa fa-star" id="likes"><%= micropost.like_users.count %></i>
  <% end %>
<% end %>

(favorites/_like_form.html.erb)

<% unless current_user?(micropost.user) %>
  <div id="like_form">
    <% if current_user.like?(micropost) %>
      <%= render 'favorites/unlike_button', micropost: micropost %>
    <% else %>
      <%= render 'favorites/like_button', micropost: micropost %>
    <% end %>
  </div>
<% end %>

(microposts/_microposts.html.erb)
　　　　　　　　　　　　　　　　　略
        <div id="like_btn">
          <% if logged_in? %>
            <%= render 'favorites/like_form', micropost: micropost %>
          <% end %>
        </div> 
　　　　　　　　　　　　　　　　　略        

(favorites/create.js.erb)

$("#like_form").html("<%= escape_javascript(render('favorites/unlike_button')) %>");

(favorites/destroy.js.erb)

$("#like_form").html("<%= escape_javascript(render('favorites/like_button')) %>");

(config/application.rb)

config.action_view.embed_authenticity_token_in_remote_forms = true

<%= csrf_meta_tags %>
<%= stylesheet_link_tag    'application', media: 'all','data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application','data-turbolinks-track': 'reload' %>

Answer 1

下記のような修正で動きませんか？
エラーの該当箇所がよくわかりませんが、多分ここでいいのかなって感じました。

(favorites/create.js.erb)

$("#like_form").html("<%= escape_javascript(render('favorites/unlike_button')) %>");

↓

$("#like_form").html("<%= escape_javascript(render(partial: 'favorites/unlike_button', locals: { micropost: @ micropost })) %>");

favorites/destroy.js.erbも同様

Comments

[hattin]

ご回答ありがとうございます。
ご教示して頂いたとおり記述したところ、解決いたしました！
ずっと悩んでいたのでありがとうございます。

Answer 2

コントローラで
@micropost = Micropost.find_by(id: params[:micropost_id])
としていますが、

ビュー_unlike_button.html.erbでは
micropost.idのようにローカル変数としてアクセスしているのでエラーになっているのではないでしょうか。

<%= render 'favorites/unlike_button', micropost: micropost %>
これに倣ってcreate.js.erbやdestroy.js.erbも変数を渡してあげるように修正すれば解決するかもしれません。

『インスタンス変数』『ローカル変数』でググると参考記事がヒットすると思います。

Comments

[hattin]

ご回答ありがとうございます。
favoritesコントローラではローカル変数で定義してあるので問題ないかと思っていたのですが、間違っているのでしょうか？
なお、それぞれのボタンのビューにあるmicropostには、
@microposts.each do |micropost|のmicropostを引き継がせている状態です。

[daidai3110]

> favoritesコントローラではローカル変数で定義してある

インスタンス変数の間違いでしょうか？

>なお、それぞれのボタンのビューにあるmicropostには、
>@microposts.each do |micropost|のmicropostを引き継がせている状態です。

Ajaxでcreateアクションを動かした際はそのeach部分は動かないと思います。

```
(favorites/create.js.erb)

$("#like_form").html("<%= escape_javascript(render('favorites/unlike_button')) %>");
```
この部分が動くのはわかりますか？
それがわかればローカル変数としてmicropostが渡っていないのがわかると思います。

>_micropost.html.erb内でeach文を使用して、@microposts.each do |micropost|としている

また余談ですがこれって「`index.html.erb`内で」の間違いですか？
であればeach分で回さなくても`render @microposts`だけで自動的に`_micropost.html.erb`が繰り返し使われますよ。

[hattin]

度々回答ありがとうございます。
僕の理解力がないのかもしれませんが、修正しても同じようなエラーを吐かれてしまいました。
修正したことは、

creata.js.erbとdestroy.js.erbに直接<%micropost=Micropost.find_by(id:params[:micropost_id])%>を入れ、
<%=render~~, micropost: micropost%>としました。
何度も質問すみません。