いいね機能の実装で非同期通信にする方法
今回いいね機能非同期通信にて実装を行っています。
いいねのカウント数の表示やいいねを押した際に表示を変える実装は済んでいます。
ただ非同期通信がうまく反映できておらず、いいねをクリックしてリロードしたらいいねが更新されるような状態となっています。
ページをリロードせずに非同期通信にて行う方法、ご教授頂けましたら幸いです。
ソースコード
routes.rbルーティング
resources :posts do
resources :comments, only: :create
resources :likes, only: [:create, :destroy]
collection do
get 'search'
end
end
likes_controller.rbコントローラー
class LikesController < ApplicationController
before_action :set_post
def create
@like = current_user.likes.new(post_id: @post.id)
@like.save
@likes = Like.where(post_id: @post.id)
end
def destroy
@like = Like.find_by(post_id: @post.id, user_id: current_user.id).destroy
@likes = Like.where(post_id: @post.id)
end
private
def set_post
@post = Post.find(params[:post_id])
end
end
like.rbモデル
class Like < ApplicationRecord
belongs_to :post
belongs_to :user
validates_uniqueness_of :post_id, scope: :user_id
end
ビューファイル
likes/_like.html.erb
<%if user_signed_in? %>
<% if Like.find_by(user_id: current_user.id, post_id: post.id) %>
<%=link_to post_like_path(post, post.likes), {method: "delete", remote: true, class: "likes-count"} do %>
<i class="fas fa-heart haert-red fa-lg faa-pulse animated-hover"></i>
<%= post.likes.count %><p class="likes">いいね済</p>
<% end %>
<% else %>
<%=link_to post_likes_path(post), {method: "post", remote: true, class: "likes-count"} do %>
<i class="far fa-heart heart fa-lg faa-pulse animated-hover"></i>
<%= post.likes.count %><p class="likes">いいね!!</p>
<% end %>
<% end %>
<% else %>
<i class="far fa-heart fa-lg"></i>
<%= post.likes.count %><p class="logs">※※※ 「いいね!!」するには新規登録/ログインが必要です ※※※</p>
<% end %>
likes/create.js.erb
$("#like-<%= @post.id %>") .html("<%= j(render partial: 'like', locals: { post: @post }) %>");
likes/destroy.js.erb
$("#like-<%= @post.id %>") .html("<%= j(render partial: 'like', locals: { post: @post }) %>");
posts/post.show.erb
~省略~
<div id="like-<%= @post.id %>">
<%= render 'likes/like', { post: @post} %>
</div>
~省略~
renderの呼び出し方やid取得がうまく行っていないと考え、改善を試みていたのですが、一歩も進めない状態でした。
お力お貸しいただけたらありがたいです。
何卒宜しくお願い致します。
0