質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.78%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,725

hattin

score 17

現状
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' %>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

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

(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も同様

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/30 12:47

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

    キャンセル

0

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/22 12:20

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

    キャンセル

  • 2019/05/22 17:06 編集

    > 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`が繰り返し使われますよ。

    キャンセル

  • 2019/05/23 10:03

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る