前提・実現したいこと
初心者です。現在ECサイトを作成しており、商品に対していいねがつけられるような機能を作成しています。
LIKEテーブルを持っており、一人のユーザーは1like可能、一つの商品は複数のライクを持つことが可能です。(メルカリのいいね機能のようなものを想像していただけるとまんまそのままです。)
発生している問題
ajaxでページのリロードなしにハートのアイコンを赤くし、いいねの数を1増やす。 反対にユーザーがすでにいいねしている場合はハートのアイコンを白くし、いいねの数を1減らすという機能を実装しているのですがなかなかうまくいきません(すでに50時間以上費やしております・・・) 同期通信まではできており、データベースに情報は保存ができる状態です。あとは非同期だけなのです。
該当のソースコード
rails likes/haml
1 - if current_user.already_liked?(@product) 2 .like-button 3 = link_to "", product_like_path(@product), method: :delete, remote: "true", class: "i fas fa-heart unlike-icon" 4 %span.like.letter いいね! 5 %p.likes-count 6 = @likes_count
likesコントローラ
class LikesController < ApplicationController def create @product = Product.find(params[:product_id]) @like = Like.new( product_id: params[:product_id], user_id: current_user.id ) if @like.save respond_to do |format| format.json end redirect_to product_path(@product) else render template: 'products/show' end @likes = Like.where(product_id: params[:product_id]) end def destroy @like = Like.find_by(product_id: params[:product_id], user_id: current_user.id) @like.destroy redirect_to product_path(params[:product_id]) @likes = Like.where(product_id: params[:product_id]) end private def like_params params.require(:like).permit(:product_id, :user_id) end end
like.js
$(document).on("turbolinks:load",function() { $("#new_like").click(function(e) { e.preventDefault(); var formData = new FormData(this); var url = $(this).attr('action'); console.log(url); $.ajax({ url: url, type: "post", data: formData, dataType: "json", processData: false, contentType: false }) .done(function(data){ console.log(data.user_id) console.log(data.product_id) }) .fail(function(data){ alert('error'); console.log(data); }) $(".fa-heart").css("color","red"); }); })
試したこと
qiitaのいいね作成の記事を複数参考にさせていただきました。
https://qiita.com/mohira/items/148c0f6ef89e8f62df72
https://qiita.com/hayabusa3703/items/2b916e652a1dc85bb6e3
https://qiita.com/jaramon/items/248bcb4b56e9fed8fc90
補足情報(FW/ツールのバージョンなど)
初めての質問で大変恐縮ですが、何卒よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー