いいね非同期実装
解決したいこと
リロードすることなくいいね機能が使えるようにすること。
発生している問題・エラー
jqueryは用いないでJavaScriptにていいね機能を実装しています。リロードしないと表示が変わらないといった問題があります。
https://gyazo.com/9f84ea915e7f1d9d4053994ecbd895e5
該当するソースコード
create.js.erb
$('#<%= @way.id.to_s %>').html('<%= j render "ways/liked", { way: @way } %>');
destroy.js.erb
$('#<%= @way.id.to_s %>').html('<%= j render "ways/liked", { way: @way } %>');
_like.html.erb
<%= link_to(way_likes_path(@way), method: :POST, remote: true, class: "like") do %>
<i class="btn btn-sm btn-outline-secondary">いいねを外す</i>
<% end %>```
```言語名
_liked.html.erb
<%= link_to (way_like_path(@way.id, @way.liked_by(current_user)), method: :DELETE, remote: true, class: "liked") do %>
<i class="btn btn-sm btn-outline-secondary">いいねを外す</i>
<% end %>
<%= render "devise/shared/header" %>
<div class="col">
<div class="card shadow-sm">
<% if @way.image.attached? %>
<%= image_tag @way.image %>
<% end %>
<% if @way.video.attached? %>
<video src="<%= rails_blob_path(@way.video) %>" type="video/mp4" controls></video>
<% end %>
<div class="card-body">
<div class="card-text">
<%#= image_tag @way.user.image %><%= @way.user.nickname %>
</div>
<p>
<p class="card-text">
<%= @way.text %>
</p>
<div id="<%= @way.id.to_s %>">
<% if @way.liked_by(current_user).present? %>
<%= link_to(way_like_path(@way.id, @way.liked_by(current_user)), method: :DELETE, remote: true, class: "liked") do %>
<i class="btn btn-sm btn-outline-secondary">いいねを外す</i>
<% end %>
<% else %>
<%= link_to(way_likes_path(@way), method: :POST, remote: true, class: "like") do %>
<i class="btn btn-sm btn-outline-secondary">いいね</i>
<% end %>
<% end %>
</div>
</div>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted"><%= l @way.created_at %></small>
<% if user_signed_in? && current_user.id == @way.user.id %>
<div class="btn-group">
<%= link_to '編集', edit_way_path, method: :get, class: "btn btn-sm btn-outline-secondary" %>
<%= link_to '削除', way_path, method: :delete, class:'btn btn-sm btn-outline-secondary' %>
</div>
<% end %>
</div>
</div>
</div>
<div class="card-body">
<% if user_signed_in? && current_user.id == @way.user_id %>
<%= form_with model: [@way,@waycomment], local: true do |f|%>
<div class="field form-group">
<%= f.label :text, "コメント" %><br />
<%= f.text_field :text,id:"inputFile",class:"form-control" ,type:"text", id:"article_title",rows:"5" %>
</div>
<div class="actions text-right">
<%= f.submit "送信する", class:"btn-default red-round-btn" %>
</div>
<% end %>
<% else %>
<% end %>
<%# // ログインしているユーザーには上記を表示する %>
<ul class="comments_lists">
<%='コメント一覧'%>
<% @waycomments.each do |waycomment| %>
<li class="card-text">
<%= @waycomment.text %>
</li>
<% end %>
</div>
class WaysController < ApplicationController
before_action :authenticate_user!, except: [:index, :show]
before_action :set_way, only: [:show, :edit, :update, :destroy]
def index
@way = Way.includes(:user).order('created_at DESC')
end
def new
@way = Way.new
end
def create
@way = Way.create(way_params)
if @way.save
redirect_to ways_path
else
render :new
end
end
def edit
redirect_to action: :index unless @way.user.id == current_user.id
end
def show
@waycomment = Waycomment.new
@waycomments = @way.waycomments.includes(:user)
end
def update
if @way.update(way_params)
redirect_to way_path
else
render :new
end
end
def destroy
if current_user.id == @way.user.id
@way.destroy
redirect_to ways_path
else
render :new
end
end
private
def way_params
params.require(:way).permit(:name, :text, :image, :video).merge(user_id: current_user.id)
end
def set_way
@way = Way.find(params[:id])
end
end
class LikesController < ApplicationController
def create
@like = current_user.likes.build(like_params)
@way = @like.way
respond_to :js if @like.save
end
def destroy
@like = Like.find_by(id: params[:id])
@way = @like.way
respond_to :js if @like.destroy
end
private
def like_params
params.permit(:way_id)
end
end
自分で試したこと
・link_toメソッドにremote: trueを追記。
0