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

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

ただいまの
回答率

90.47%

  • Ruby on Rails

    7479questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Ruby on Rails 4

    2455questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

  • Ajax

    1114questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Rails AjaxでPatialを切り替える方法について

解決済

回答 2

投稿 編集

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

Yuinyan

score 237

前提・実現したいこと

TwitterやFacebookのような「いいね」ボタンをAjaxで実装したいと思っています。
favorite / unfavorite の partialをAjaxで切り替えたいです。

発生している問題・エラーメッセージ

上手く値がPartialに渡らないようで、データベースには正しく保存されるのですが、その後のRenderで
undefined local variable or method micropost と出てしまいます。

SQL (0.5ms)  INSERT INTO "favorites" ("favpost_id", "favuser_id", "created_at", "updated_at") VALUES (?, ?, ?, ?)  [["favpost_id", 48], ["favuser_id", 1], ["created_at", "2016-04-19 08:15:25.509283"], ["updated_at", "2016-04-19 08:15:25.509283"]]
   (15.1ms)  commit transaction
  Micropost Load (0.8ms)  SELECT "microposts".* FROM "microposts"
  Rendered favorites/fav.js.erb (69.8ms)
Completed 500 Internal Server Error in 124ms (ActiveRecord: 17.1ms)

ActionView::Template::Error (undefined local variable or method `micropost' for #<#<Class:0x007f099c07e3b8>:0x007f09aea77ad8>):
    1: $("#favorite_<%= micropost.id %>").html("<%= escape_javascript(render('users/fav'), locals => { :micropost => micropost }) %>");
  app/views/favorites/fav.js.erb:1:in `_app_views_favorites_fav_js_erb__895208058350091589_69839624644240'

該当のソースコード

<% if current_user.favorite?(micropost) %> 
<%= render :partial => 'users/unfav', :locals => { :micropost => micropost } %>
<% else %>
<%= render :partial => 'users/fav', :locals => { :micropost => micropost } %>
<% end %>
user/fav.html.erb
<%= link_to "いいね", favorite_favorite_path(micropost), :remote => true, :class => "btn btn-primary btn-xs" , "data-type" => "html" %>
user/unfav.html.erb
<%= link_to "いいね解除", unfavorite_favorite_path(micropost), :remote => true, :class => "btn btn-default btn-xs", "data-type" => "html" %>
fav.js.erb
$("#favorite_<%= micropost.id %>").html("<%= escape_javascript(render :partial => 'users/fav', :locals => { :micropost => @micropost }) %>");
unfav.js.erb
$("#favorite_<%= micropost.id %>").html("<%= escape_javascript(render :partial => 'users/unfav', :locals => { :micropost => @micropost }) %>");

試したこと

・remote: true を外した状態だと正常に値も入ります。
・localsの部分の書き方は一通り試したつもりです。

補足情報(言語/FW/ツール等のバージョンなど)

Rails 4.2.1
Cloud9
で実装しています。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

なるほどであれば最初のファイルについては直す必要はありません。js.erbには全て@をつけて,js.erbをクライアントに送信するコントローラーで@micropostに値を入れて下さい。
js.erbが@でないといけない理由は再リクエスト時にはrender元のテンプレートファイルの情報は,サーバ側はwebstrageを使っていない限り何一つ保存してないのでjs.erbファイルに変数を埋め込むには値を入れ直す必要があります。
この時のjs.erbのスコープはコントローラーの物になるのでview変数で参照する必要があります。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/04/20 14:21 編集

    すみません。無事できました!本当にありがとうございます。3日くらい悩んでいたので、本当にありがとうございました!

    キャンセル

0

最初のerbのコードでmicropostの@を抜いているのはなぜでしょうか?基本的にviewに渡す変数はコントローラーのインスタンス変数(view変数)とし,@が付かないものはhelper経由のメソッドで値を取得するという規約になっていると思います。helper経由などの理由がないのであれば,micropostには@をつけましょう。むしろformでcontrollerで値を代入した変数は@をつけないでアクセスすることはできないので,viewで変数定義された値をformに代入しているという実装になっている場合は問題です。formに埋め込む変数は特殊な事情がない限りview変数を使ってください。

その上でですが,error内容と提示されているコードに不整合があるようにお見受けするのでerror内容の出力の例で原因を説明しますね。

//error内容の出力
$("#favorite_<%= micropost.id %>").html("<%= escape_javascript(render('users/fav'), locals => { :micropost => micropost }) %>");


変数micropostに値が入っていないということなので,コントローラ側では,@micropostに値を代入し,js.erbのコードは@micropost.id,・・・,{ :micropost => @micropost }のように二箇所直してください。また,最初のerbのmicropostにも全て,@をつけて,コントローラ側でも値を@micropostに代入してください。

partialテンプレートで@をつけなくていい理由はlocalsで@micropostの値をmicropostに埋め込んでるからです。
もしこれで解決できないようでしたらまたご返信ください。。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/04/20 10:22

    最初のerbのコードでmicropostの@を抜いているのは、このView自体がパーシャルで、<%= render @microposts %>で、一つ一つのツイートを呼び出している為です。

    その場合どのようにインスタンス変数にすれば宜しいでしょうか。

    キャンセル

  • 2016/04/20 10:53

    すみません。コメントに投稿するつもりがまちがって回答に投稿してしまいましたが情報追記しました。

    キャンセル

関連した質問

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

  • Ruby on Rails

    7479questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Ruby on Rails 4

    2455questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

  • Ajax

    1114questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。