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

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

ただいまの
回答率

89.86%

Ajexが反応しない。 【いいね機能の実装】

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 474

ko-u

score 51

Ruby初学者です。

ご教授頂けると幸いです。

【いいね機能を実装したい】

【悩んでいること】
・Ajexが反応しない
→ブラウザを更新をすると反映はされるのですが、Ajexで切り替わりません。

【コード】
http://mochikichi.hatenablog.com/entry/rails_tutorial_like
こちらの記事を参考にしてイイね機能を作成しました。

likes/_like.html.erb

<% if post.like_user(current_user.id) %>
  <%= button_to post_like_path(likes, post_id: post.id), method: :delete, id: post.id, remote: true do %> 
    <%= image_tag("icon_red_heart.png") %>
    <span>
      <%= post.likes_count %>
    </span>
  <% end %>
<% else %>
  <%= button_to post_likes_path(post),id: post.id, remote: true do %>  
    <%= image_tag("icon_heart.png") %>
    <span>
      <%= post.likes_count %>
    </span>
  <% end %>
<% end %>


create.js.erb

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


destroy.js.erb

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

likes_controller

def create
    @like = current_user.likes.find_or_create_by(post_id: params[:post_id])
    @likes = Like.where(post_id: params[:post_id])
    @post = Post.find(params[:post_id])
  end

  def destroy
    like = current_user.likes.find_by(post_id: params[:post_id])
    like.destroy
    @likes = Like.where(post_id: params[:post_id])
    @post = Post.find(params[:post_id])
  end
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • ykp_yk

    2018/12/18 18:46

    user.rbに定義されていると思いますがlike_userメソッドの内容を添付してください。
    また、問題点として create.js.erbの実行ステータスが200になっているか、それともエラーなのかといった点などボタンを押した際のターミナルをよく確認してその情報を教えてください。

    キャンセル

  • ko-u

    2018/12/18 21:09

    _like.html.erbをレンダリングしていた箇所にも、jsと同じidを指定することでAjexが反応しました。

    ありがとうございました。

    キャンセル

回答 3

check解決した方法

0

_like.html.erbをレンダリングしていた箇所にも、jsと同じidを指定することでAjexが反応しました。

ありがとうございました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

連続でクリックをすると一人のユーザーで複数のいいねがついてしまう。

likes♯createアクションの以下処理ですがこちらですと何度でもレコードが作られてしまいますね。

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


重複しないレコードを作成するようにするために find_or_create_by メソッドを使ってみると良いと思います。

http://railsdoc.com/references/find_or_create_by

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

また、こちらはUserがMicropostをいいねするという観点から以下の用なコードを書いた方が見通しが良いかもしれません。

user.rb

has_many: likes
likes_controller.rb

def create 
  @like = current_user.likes.find_or_create_by(micropost_id: params[:micropost_id])

Ajexが反応しない

Ajaxが反応しないという情報だけですと何を確認すれば良いか判断がすぐにできませんが、ボタンが切り替わらないという症状でしょうか。
ボタンを押すとレコードは作成されているようですからjsの部分になりそうですね。
ボタンを押した後コンソールで create.js.erbがエラーなく正しくrenderされているかを確認してみてください。

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


このコードからの推測となりますが セレクタ #like-buttons が一意ではないために正しいセレクタを指定する必要があると思います。

ボタンに一意のセレクタをつけ、jsで書き換えるようにしてみるとよさそうです(動作未検証です。)。

microposts/_micropost.html.erb

  <!--like拡張機能-->
  <div id="like-<%= micropost.id %>">
    <%= render partial: 'likes/like', locals: { micropost: micropost, likes: @likes } %>
  </div>
likes_controller.rb

def create
  @micropsot = Micropost.find(params[:micropost_id)
  @like = current_user.likes.find_or_create_by(micropost_id: @micropost.id)
likes/create.js.erb

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

セレクタが正しく指定されているかを確認するために一旦以下のようなコードで試し、ボタンが切り替わるかを行ってみても良いと思います。

likes/create.js.erb

$("#like-<%= @micropost.id %>").html("ボタン");

動作確認出来ましたら同じ要領でいいね解除の方も行ってみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/12/17 13:22

    丁寧なご回答ありがとうございました!

    余分にイイねされてしまう件に関しましては、find_or_create_byを使用することで解決致しました!

    Ajexが反応しない件に関しましては、ご指摘を頂いた通りに修正したのですが引き続きエラーが起こってしまっています。

    エラー内容を追加致しましたので、ご教授頂けると幸いです。

    キャンセル

-2

すいません。回答じゃないです。過去のko-uさんの質問で教えて頂きたいことがありまして、メールしてます。

今、https://teratail.com/questions/152541
と同じエラーにハマっていて、ko-uさんの「photoをリセットされて解決した。」とのコメントを読みましたが、どうやってやるのでしょうか。

私、半日ぐらいググったのですが、わからず失礼だと思いましたが、回答にて質問させて頂いてます。
もし宜しければ教えてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/12/25 18:24

    いえいえ、なんかもともと2回まで?
    だったらしくて、もしもの時の為に残して置こうかと。

    キャンセル

  • 2018/12/26 13:57

    そうだったんですね。。。

    2回だけって珍しいですね・・

    キャンセル

  • 2018/12/27 01:10

    謎の回数制限です。。。

    キャンセル

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

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

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