前提・実現したいこと
rails でAjaxを使ったコメント機能を実装中です。
コメントがちゃんと表示されるか確認しようと思いコメントを入力後送信してみると画面に何の変化もありませんでした。
binding.pryを使って確認をしてみるとpost_idがnilとなっていたのでこれが原因かなと思いました。
保存がきちんと行われて内容がブラウザに表示されるようにしたいです。
該当のソースコード
controllers/comment_controller.rb
ruby
1class CommentsController < ApplicationController 2 3 def create 4 comment = Comment.create(comment_params) 5 render json:{comment: comment} 6 end 7 8 private 9 def comment_params 10 params.require(:comment).permit(:text).merge(user_id: current_user.id, post_id: params[:post_id]) 11 end 12end
controllers/posts_controller.rb
ruby
1class PostsController < ApplicationController 2 before_action :authenticate_user!, only: [:new,:edit] 3 before_action :back_index, only: :edit 4 5 def index 6 @posts = Post.all.order("created_at DESC") 7 end 8 9 def new 10 @post = Post.new 11 end 12 13 def create 14 @post = Post.new(post_params) 15 if @post.save 16 redirect_to root_path 17 else 18 render :new 19 end 20 end 21 22 def show 23 @post = Post.find(params[:id]) 24 @comment = Comment.new 25 @comments = @post.comments.includes(:user) 26 end 27 28 def edit 29 @post = Post.find(params[:id]) 30 end 31 32 def update 33 @post = Post.find(params[:id]) 34 if @post.update(post_params) 35 redirect_to post_path(@post.id) 36 else 37 render :edit 38 end 39 end 40 41 def destroy 42 @post = Post.find(params[:id]) 43 @post.destroy 44 redirect_to user_path(current_user.id) 45 end 46 47 private 48 49 def post_params 50 params.require(:post).permit(:image,:caption,:category_id).merge(user_id: current_user.id) 51 end 52 53 def back_index 54 @post = Post.find(params[:id]) 55 if current_user.id != @post.user_id 56 redirect_to root_path 57 end 58 end 59 60end
comment.js
jacascript
1function post (){ 2 const submit = document.getElementById("submit"); 3 submit.addEventListener("click", (e) => { 4 e.preventDefault(); 5 const form = document.getElementById("form"); 6 const formData = new FormData(form); 7 const XHR = new XMLHttpRequest(); 8 XHR.open("POST"," /posts/post_id/comments",true); 9 XHR.responseType = "json"; 10 XHR.send(formData); 11 XHR.onload = () => { 12 const com = document.getElementById("comments") 13 const item = XHR.response.commnt; 14 const html = ` 15 <div class="comment> 16 ${item.text} 17 </div>`; 18 com.insertAdjacentHTML("afterend", html); 19 }; 20 }); 21}; 22 23window.addEventListener('load', post);
views/posts/show.html.erb
ruby
1<%= render "shared/header" %> 2 3<div class="posts"> 4 <div class="post"> 5 <div class="top-post"> 6 <%= link_to "投稿者 #{@post.user.nickname}", user_path(@post.user.id), class:"user-name-post" %> 7 <span><%= @post.created_at.to_s(:datetime_jp) %></span> 8 </div> 9 <div class="main-post"> 10 <div class="trash-edit"> 11 <% if user_signed_in? && current_user.id == @post.user_id %> 12 <div class="trash"> 13 <%= link_to(post_path(@post.id), method: :delete, class:"fa fa-trash fa-4x trash-btn", style: "display: flex;" ) do%> 14 <% end %> 15 </div> 16 <div class="edit"> 17 <%= link_to(edit_post_path(@post.id),class:"fa fa-edit fa-4x edit-btn",style: "display: flex;") do %> 18 <% end %> 19 </div> 20 <% end %> 21 </div> 22 <%= link_to(post_path(@post.id),class: "image-link") do %> 23 <%= image_tag @post.image, class: 'image-main-show' %> 24 <% end %> 25 </div> 26 <div class="footer-show"> 27 <%= link_to @post.user.nickname, user_path(@post.user.id), class:"user-name-post" %> 28 <hr> 29 <p class="caption"><%= @post.caption %></p> 30 <hr> 31 <p><%= "アイテムカテゴリー : #{@post.category.name}"%></p> 32 </div> 33 </div> 34 35<div class="comments"> 36 <div class="comment"> 37 <% if user_signed_in? %> 38 <%= form_with(model: [@post, @comment], local: true, class:"comment-form",id:"form") do |form| %> 39 <%= form.text_area :text, placeholder: "コメントを追加...",class:"comment-area", row: "1" %> 40 <%= form.submit "コメント",class:"comment-submit",id:"submit" %> 41 <% end %> 42 <% end %> 43 </div> 44</div> 45 46<% @comments.each do |comment| %> 47 <div class="comments-date" id="comments"> 48 </div> 49<% end %> 50 51 52<%= render "shared/footer" %>
試したこと
commentsコントローラーの保存処理に何か問題があるのかと思い確認しましたが問題があるように思えませんでした...
他にどこか問題があるのかそれともやっぱり保存の記述に問題があるのでしょうか?
どなたか分かる方いらっしゃればご教授願いたいです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。