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
なので
- ルーティング、link_to にmethod: : postを追加、jsでtype: "post"に変更
- link_toに data: {post_id: post.id, user_id: current_user.id} を追加
- 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` })
上記を行いましたが同じようにいいね数の更新はされませんでした。
どなたかご教授いただけますと幸いです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/31 08:48