いいね機能の非同期実装
jqueryは用いないでJavaScriptにていいね機能を実装しています。リロードしないと表示が変わらないといった問題があります。どうしたらリロードすることなくいいね機能が使えるようになるのかご教授いただければと思います。
発生している問題・エラー
https://gyazo.com/7bb52e8a575e4e69ee8b1bccff26dce5
ターミナル
ActionView::Template::Error (Missing partial likes/_way, application/_way with {:locale=>[:ja], :formats=>[:js, :html], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby, :jbuilder, :haml]}. Searched in:
* "/Users/nishio/projects/original/app/views"
* "/Users/nishio/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/devise-4.7.3/app/views"
* "/Users/nishio/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/actiontext-6.1.1/app/views"
* "/Users/nishio/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/actionmailbox-6.1.1/app/views"
):
1: $('#way_<%= @way.id %>').html("<%= j(render "way", post: @way) %>");
app/views/likes/create.js.erb:1
Started GET "/rails/active_storage/disk/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdDVG9JYTJWNVNTSWhaMncxZUdWaGRqTXhZVEV6TTNCdU1HRXlabTU0TW1KeVozUXhlUVk2QmtWVU9oQmthWE53YjNOcGRHbHZia2tpQWNacGJteHBibVU3SUdacGJHVnVZVzFsUFNJbE0wWWxNMFlsTTBZbE0wWWxNMFlsTTBZbE0wWWxNMFlsTTBZZ01qQXlNQzB4TWkweU1pQXlNQzQxTVM0ME55NXdibWNpT3lCbWFXeGxibUZ0WlNvOVZWUkdMVGduSnlWRk15VTRNaVZDT1NWRk15VTRNaVZCUmlWRk15VTRNeVZCUVNWRk15VTRNeVZDUXlWRk15VTRNeVZDTXlWRk15VTRNaVZDTnlWRk15VTRNeVZCTnlWRk15VTRNeVU0TXlWRk15VTRNeVU0T0NVeU1ESXdNakF0TVRJdE1qSWxNakF5TUM0MU1TNDBOeTV3Ym1jR093WlVPaEZqYjI1MFpXNTBYM1I1Y0dWSklnNXBiV0ZuWlM5d2JtY0dPd1pVT2hGelpYSjJhV05sWDI1aGJXVTZDbXh2WTJGcyIsImV4cCI6IjIwMjEtMDItMTRUMTE6Mzc6MzEuOTM1WiIsInB1ciI6ImJsb2Jfa2V5In19--1b2a0b8bdb3c3930c51acb9f96050a8036837a5c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-12-22%2020.51.47.png" for ::1 at 2021-02-14 20:33:19 +0900
Processing by ActiveStorage::DiskController#show as PNG
Parameters: {"encoded_key"=>"[FILTERED]", "filename"=>"スクリーンショット 2020-12-22 20.51.47"}
Completed 200 OK in 1ms (ActiveRecord: 0.0ms | Allocations: 270)
該当するソースコード
create.js.erb
$('#way_<%= @way.id %>').html("<%= j(render "way", post: @way) %>");
destroy.js.erb
$('#way_<%= @way.id %>').html("<%= j(render "way", post: @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 %>
show.html.erb
<%= render "devise/shared/header" %>
<body>
<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">
<%= @way.user.nickname %>
</div>
<p>
<p class="card-text">
<%= @way.text %>
</p>
<tr>
<td>
<div id= "way_<%= @way.id %>">
<%= render "way", post: @way %>
</div>
</td>
</tr>
</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| %>
<% if @waycomments %>
<li class="card-text">
<%= waycomment.text %>
</li>
<% end %>
<% end %>
</div>
</body>
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).order('created_at DESC')
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を追記。
・下記のurlを参考にcreate.js.erbとdestory.js.erb2つのjs.erbファイルに$(console.log("111"));を記述してコンソール場にて確認後、発火したいクラスの記述を行った。
https://qiita.com/yoshi-2015/items/6d5eb88abb2a4ef09f92#%E3%81%84%E3%81%84%E3%81%AD%E6%A9%9F%E8%83%BD%E3%81%AE%E5%A0%B4%E5%90%88
0