前提
プログラミング初学者でして、質問させていただくにあたって、わかりにくい表現をしてしまってたり、情報が足りなくなってしまっている場合があるので、お気づきの際はご指摘していただけたら、幸いです。よろしくお願いします。
Ruby on Railsで投稿を行うアプリケーションを作成しました。
投稿に対して、コメント機能を実装しました。
実現したいこと
コメント機能をAjaxの方針の元、非同期通信を実現したいです。
まずは、コメントの投稿のみ実装を行なっており、コメントの削除を非同期通信を実現したいです。
発生している問題・エラーメッセージ
コメントの投稿ボタンを押すと、フォームにテキストが残ったまま固まり、リロードを押すと投稿されます。
https://gyazo.com/6825628df82eb446f91dec3a9fa5aecd
該当のソースコード
html.show.html.erb
1<div class="recipe-comments">2 <%= render 'comments', comment: @comment %> 3 <%= form_with model: [@recipe, @comment] do |f| %> 4 <div class = 'form-group'>5 <%= f.text_area :content, class: "form-control", id:"comment_content", placeholder: "コメントを記入してください" %> 6 </div>7 <%= f.submit "コメントする", class: "btn btn-primary" , id: "submit" %> 8 <% end %> 9 </div>
form_withのlocal trueを外し、create.js.erbを呼び出す様にしています。
ruby.comment_controller.rb
1class CommentsController < ApplicationController2before_action :authenticate_user!, only: [:create, :destroy]3 def create4 @recipe = Recipe.find(params[:recipe_id])5 @comment = Comment.new(comment_params)6 @comment.user_id = current_user.id 7 @comment.recipe_id = @recipe.id 8 @comment.save 9 end10 11 def destroy12 @recipe = Recipe.find(params[:recipe_id])13 @recipe_comments = @recipe.comments 14 if Comment.find_by(id: params[:id], recipe_id: params[:recipe_id]).destroy 15 redirect_to recipe_path(@recipe)16 end17 end18 19 private20 def comment_params21 params.require(:comment).permit(:content)22 end23end24
redirectはさせず、jsファイルを探しにいくようにしています。
ruby.create.js.erb
1$("text_area").val("");2$("input").val("");3$('.recipe-comments').html("<%= escape_javascript(render 'comments', comment: @comment) %>")
試したこと
create.js.erbファイルの記述に自信がなく、１〜２業目でテキストエリアを空にして、３行目でshow.html.erbの”recipe-commentsクラス”を呼び出し、投稿したコメントを呼び出しているので、動くと思ったのですがうまくいきませんでした。
補足情報（FW/ツールのバージョンなど）
ruby 2.6.5
Ruby on Rails 6.0.0
わかりにく質問になってしまっているかもしれませんが、よろしくお願いいたします。
情報が足りないなどございましたら、コメントいただけると幸いです。
0 コメント