イイねボタンの非同期処理(rails)
はじめまして。
商品投稿アプリ作成中で商品詳細画面にてイイネボタンを実装に挑戦しました。
progateを参考にしながら非同期なしでのイイねボタンは実装できました。イイねハートが赤になり数がカウントされるとこまでできました。
イイネボタンを押すたびに画面全部が更新されてしまうので、イイねボタンのみ非同期処理で更新させたいと思い、
検索してトップの方に出てくる記事等を参考に、remote:trueを使うやり方でコードを書いてみましたがイイねボタンを押すとページの一番上に戻ってイイねカウントが増えるだけで(ページ全部更新されてる?)非同期処理が実行されずに困っています。
どこの箇所がおかしい等のご指摘をいただけたら助かります。
また学習開始して間もなく理解が浅いのも実感しています。
非同期処理の実装についてのオススメの記事や技術書等も可能な範囲で教えてもらえると助かります。
環境rails.5.2.3
該当のソースコード
ruby
1ルーティング 2Rails.application.routes.draw do 3 post "likes/:product_id/create" => "likes#create", as: 'like' 4 post "likes/:product_id/destroy" => "likes#destroy", as: 'unlike' 5end
コントローラー class LikesController < ApplicationController before_action :set_variables def create @like = Like.new(user_id: session[:user_id], product_id: params[:product_id]) @like.save @likes_count = Product.find_by(id: params[:product_id]) redirect_to @product end def destroy @like = Like.find_by(user_id: session[:user_id], product_id: params[:product_id]) @like.destroy redirect_to @product end def set_variables @product = Product.find(params[:product_id]) @id_name = "#like-link-#{@product.id}" end end
ビュー main.html.haml .product-detail__item__button-box__left = render 'products/product-detail/like', locals: {product: @product}
部分テンプレート likes/_like.html.haml %button.product-detail__item__button-box__left__good %span.product-detail__item__button-box__left__good__text{id: "like-link-#{@products.id}"} - if Like.find_by( user_id: current_user.id, product_id: @products.id) %i.fas.fa-heart.product-detail__item__button-box__left__good__text__heart = link_to("いいね!", unlike_path(@products.id), method: :post, remote: true) - else %i.far.fa-heart.product-detail__item__button-box__left__good__icon = link_to("いいね!", like_path(@products.id), method: :post, remote: true) %span.product-detail__item__button-box__left__good__count = @products.likes_count
views/likes/create.js.erb $("<%= @id_name %>").html('<%= escape_javascript(render("products/product-detail/like", product: @product )) %>');
views/likes/destroy.js.erb $("<%= @id_name %>").html('<%= escape_javascript(render("products/product-detail/like", product: @product )) %>');
回答1件
あなたの回答
tips
プレビュー