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

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

ただいまの
回答率

87.34%

Ajaxでのいいねの数が更新されない

解決済

回答 2

投稿 編集

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

score 3

Rails初学者です。

実現したいこと

Ajaxを用いた以下のいいね機能を実装をしたいです。

クリックされると・・・

① 太文字にする
② json形式で帰ってきたデータからいいねの総数のみを更新する

以下のコードで現在①は反映しておりますが、②が反映されず以下(gif)のような表示になります。
https://gyazo.com/e53ff3e5da99110819616a29ba0e6d45

現在のコード

posts/index.html.haml

- if user_signed_in?
  %img.icon-image{ src: "#{@user.image}" }
  %p #{@user.name}さんでログイン中
  = link_to "投稿作成ページへ", new_post_path
  = link_to "ログアウト" , destroy_user_session_path, method: :delete
- else
  = link_to "ユーザー登録ページへ", new_user_registration_path
  = link_to "ログイン" , user_session_path, method: :post
.all-posts
  - @posts.each do |post|
    .post
      = "#{post.user.name}(#{post.created_at.in_time_zone("Tokyo").strftime("%Y/%m/%d %H:%M:%S")}) : "
      = post.content
      %span 
        = link_to create_favorite_post_path(post) ,action: "#{create_favorite_post_path(post)}", id: "post_#{post.id}", class: "get_fav", remote: true
          いいね #{post.favorites.count}
      %br

posts_controller.rb

省略
  def create_favorite
  #あとで既にお気に入り追加している場合の条件分岐を書く
    @post = Favorite.create(user_id: current_user.id, post_id: @post.id)
    respond_to do |format|
      format.html { redirect_to root_path}
      format.json
    end
  end

post.js

$(function(){
  $(".get_fav").on("click", function(e){
    e.preventDefault();
    $(this).addClass("active");
    $.ajax({
      url: $(this).attr("action"),
      type: "get",
      datatype: `json`
    })
    .done(function(json){
      $(".active").css("font-weight", "bold");
      $(`#post_${json.post}`).text(`いいね ${json.favorite}`);
    })
    .fail(function(){
      alert(`error`);
    })
  })
})

create_favorite.json.jbuilder

json.post @post.id
json.favorite @post.favorites.count

試したこと

①doneのなかの $(".active").css("font-weight", "bold");は反映されているのでAjax通信自体は成功しています。
またエラーが出ていないので、json形式でもデータを渡せているという事?が確認できます。

なら、やはりどの部分で問題が生じているかがわからなくなりました。

     .done(function(json){
      $(".active").css("font-weight", "bold");
      $(`#post_${json.post}`).text(`いいね ${json.favorite}`);
    .fail(function(){
      alert(`error`);
    })

②HTTPメソッドを"POST"に変更し修正する。
参考にしている以下のサイトではgetですが調べるとpostでやっている方が多いようです。
http://www.onseo.info/articles/9

なので

  1. ルーティング、link_to にmethod: : postを追加、jsでtype: "post"に変更
  2. link_toに data: {post_id: post.id, user_id: current_user.id} を追加
  3. jsを以下のように編集
    $(".get_fav").on("click", function(e){
    e.preventDefault();
    $(this).addClass("active");
    postId = $(this).data(`post_id`)
    userId = $(this).data(`user_id`)
    $.ajax({
      url: $(this).attr("action"),
      type: "post",
      data: {
        `post_id`: postId,
        `user_id`: userId
      },
      datatype: `json`
    })

上記を行いましたが同じようにいいね数の更新はされませんでした。

どなたかご教授いただけますと幸いです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+1

こちらを確認してみてください
1: 返ってくるfavoriteが期待している値か

console.log(json.favorite)

2: DOMが取れているか

console.dir($(`#post_${json.post}`))

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/08/03 12:20

    回答ありがとうございます。
    自分でいろいろいじって機能的には実装できた後に確認として
    1,2両方試しましたがどちらも値は"undefined"でした。

    なぜ実装できたのかまだ自分でも理解できてない状況ですが、ご回答ありがとうございました。

    キャンセル

+1

直接的な回答でなくて恐縮ですが・・・
RailsでAjaxを使うのであればremote:trueを活用したほうがシンプルで良いかと思います。

https://qiita.com/tambo/items/45211df065e0c037d032

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/31 17:48

    no1knows様、回答、記事のご紹介ありがとうございます!
    remote:trueはlink_toに現状当てている状況なんですよね。

    キャンセル

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

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

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