Q&A
既存メッセージは「いいね（いいね解除）」できるのですが、メッセージ新規投稿時のみ「いいね」を押しても反応しない状態です。
ターミナル上では機能しているのですが、
Started GET "/" for ::1 at 2020-10-28 20:06:53 +0900 Processing by MessagesController#index as HTML User Load (0.3ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 3 ORDER BY `users`.`id` ASC LIMIT 1 Rendering messages/index.html.haml within layouts/application Rendered messages/_header.html.haml (2.7ms) Message Load (0.3ms) SELECT `messages`.* FROM `messages` WHERE `messages`.`user_id` = 3 Message Exists (0.3ms) SELECT 1 AS one FROM `messages` INNER JOIN `likes` ON `messages`.`id` = `likes`.`message_id` WHERE `likes`.`user_id` = 3 AND `messages`.`id` = 493 LIMIT 1 Like Load (0.2ms) SELECT `likes`.* FROM `likes` WHERE `likes`.`user_id` = 3 AND `likes`.`message_id` = 493 LIMIT 1 Rendered likes/_like.html.haml (4.4ms) Message Exists (0.3ms) SELECT 1 AS one FROM `messages` INNER JOIN `likes` ON `messages`.`id` = `likes`.`message_id` WHERE `likes`.`user_id` = 3 AND `messages`.`id` = 495 LIMIT 1 Like Load (0.2ms) SELECT `likes`.* FROM `likes` WHERE `likes`.`user_id` = 3 AND `likes`.`message_id` = 495 LIMIT 1 Rendered likes/_like.html.haml (2.6ms) Rendered messages/_message.html.haml (19.3ms) Rendered messages/_navi.html.haml (2.1ms) Rendered messages/index.html.haml within layouts/application (30.7ms) Completed 200 OK in 61ms (Views: 55.2ms | ActiveRecord: 1.5ms)
comment.jsの下記の箇所から上手くデータを引き渡せていないと考えております。
<div class="like"> <div id="likes_buttons_<%= ${j.like} %>"> <a href="users/${j.user_id}/messages/${j.message_id}/likes" data-remote="true" data-method="post"> <i class="far fa-heart like-btn"></i> </a> </div> </div>
ご助言頂ければ幸いです。
以下参照コード
messages_controller.rb
class MessagesController < ApplicationController def index @message = Message.new @messages = current_user.messages end def create @message = current_user.messages.new(message_params) if @message.save respond_to do |format| format.json end else @messages = current_user.messages flash.now[:alert] = 'メッセージを入力してください。' render :index end end def destroy message = Message.find(params[:id]) message.destroy end def edit @message = Message.find(params[:id]) end def update message = Message.find(params[:id]) message.update(message_params) end private def message_params params.require(:message).permit(:content, :image, :takername).merge(user_id: current_user.id) end end
_message.html.haml
.messages - @messages.each do |m| .message .takerface %img{alt: "userface", src: "https://imgc.eximg.jp/i=https%253A%252F%252Fs.eximg.jp%252Fexnews%252Ffeed%252FRen_ai%252FRen_ai_188420_6aed_1.jpg,zoom=600,quality=70,type=jpg"}/ .contents .takername = m.takername さんへ .letter - if m.content.present? %p.lower-message__content = m.content .credo ＃仲間好き ＃人生を変える ＃最速でエンジニア転職 ＃Inside Stories .like %div{:id => "likes_buttons_#{m.id}"} = render partial: 'likes/like', locals: { m: m} .message__date = m.created_at.strftime("%Y年%m月%d日 %H時%M分") .more %ul.more_list %li = link_to '編集', edit_user_message_path(current_user.id,m.id) %li = link_to '削除', user_message_path(current_user.id,m.id), method: :delete .message .takerface %img{alt: "userface", src: "https://imgc.eximg.jp/i=https%253A%252F%252Fs.eximg.jp%252Fexnews%252Ffeed%252FRen_ai%252FRen_ai_188420_6aed_1.jpg,zoom=600,quality=70,type=jpg"}/ .contents .takername (参考view)ミシェル さんへ .letter いつもサポートしてくれてありがとうございます！おかげさまで仕事がはかどります！ .credo ＃仕事好き ＃親身心 ＃人生を変える .like いいね！ .form = form_for [current_user, @message] do |f| = f.text_field :takername, class: 'form__title', placeholder: '仲間の名前' = f.text_area :content, class: 'form__message', placeholder: 'メッセージ', rows: "5" = f.submit 'おくる', class: 'form__submit'
create.json.jbuilder
json.user_name @message.user.name json.created_at @message.created_at.strftime("%Y年%m月%d日 %H時%M分") json.content @message.content json.like_count @message.likes.count json.message_id @message.id json.user_id @message.user.id json.takername @message.takername json.like @like
comment.js
$(function(){ function buildHTML(j){ if ( j.content ) { var html = `<div class="message"> <div class="takerface"> <img src=${"https://imgc.eximg.jp/i=https%253A%252F%252Fs.eximg.jp%252Fexnews%252Ffeed%252FRen_ai%252FRen_ai_188420_6aed_1.jpg,zoom=600,quality=70,type=jpg"} > </div> <div class="contents"> <div class="takername"> ${j.takername + " さんへ"} </div> <div class="letter"> <p class="lower-message__content"> ${j.content} </p> </div> <div class="credo"> ＃仕事好き ＃親身心 ＃人生を変える </div> <div class="like"> <div id="likes_buttons_<%= ${j.like} %>"> <a href="users/${j.user_id}/messages/${j.message_id}/likes" data-remote="true" data-method="post"> <i class="far fa-heart like-btn"></i> </a> </div> </div> </div> <div class="message__date"> ${j.created_at} </div> <div class="more"> <ul class="more_list"> <li> <a href="users/${j.user_id}/messages/${j.message_id}/edit">編集</a> </li> <li> <a href="users/${j.user_id}/messages/${j.message_id}" data-method="delete">削除</a> </li> </ul> </div> </div>` return html; } } $('#new_message').on('submit', function(e){ e.preventDefault(); var formData = new FormData(this); var url = $(this).attr('action'); $.ajax({ url: url, //同期通信でいう『パス』 type: 'POST', //同期通信でいう『HTTPメソッド』 data: formData, dataType: 'json', processData: false, contentType: false }) .done(function(data){ var html = buildHTML(data); $('.messages').append(html); $('form')[0].reset(); $('.messages').animate({ scrollTop: $('.messages')[0].scrollHeight}); $(".form__submit").removeAttr("disabled"); }) .fail(function() { alert("メッセージ送信に失敗しました"); }); }) });
likes_controller.rb
class LikesController < ApplicationController def create @message = clicked_message unless current_user.already_like_this?(@message) @like = current_user.like_this(@message) flash[:success] = '投稿に「いいね！」しました。' if @like.save respond_to :js end end end def destroy @message = clicked_message @like = current_user.likes.find_by(message_id: params[:message_id]).destroy flash[:danger] = '「いいね！」を解除しました。' if @like.destroy respond_to :js end end private def clicked_message Message.find(params[:message_id]) end end
_like.html.haml
- if current_user.already_like_this?(m) - like = current_user.likes.find_by(message_id: m.id) = link_to user_message_like_path(current_user.id,m.id,like.id), method: :delete, remote: true do %i.fas.fa-heart.unlike-btn - else = link_to user_message_likes_path(current_user.id,m.id), method: :post, remote: true do %i.far.fa-heart.like-btn
create.js.erb
$("#likes_buttons_<%= @message.id %>"). html("<%= j(render partial: 'likes/like', locals: {m: @message}) %>");
あなたの回答
tips
プレビュー
