前提
プログラミング初学者でして、質問させていただくにあたって、わかりにくい表現をしてしまってたり、情報が足りなくなってしまっている場合があるので、お気づきの際はご指摘していただけたら、幸いです。よろしくお願いします。
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 < ApplicationController 2before_action :authenticate_user!, only: [:create, :destroy] 3 def create 4 @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 end 10 11 def destroy 12 @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 end 17 end 18 19 private 20 def comment_params 21 params.require(:comment).permit(:content) 22 end 23end 24
redirectはさせず、jsファイルを探しにいくようにしています。
ruby.create.js.erb
1$("text_area").val(""); 2$("input").val(""); 3$('.recipe-comments').html("<%= escape_javascript(render 'comments', comment: @comment) %>")
recipes_controllerの追記
ruby.recipes_controller
1class RecipesController < ApplicationController 2 before_action :authenticate_user!, except: [:index, :show] 3 before_action :set_recipe, only: [:show, :destroy, :edit, :update,] 4 before_action :contributor_confirmation, only: [:edit, :update, :destroy] 5 def index 6 @recipes = Recipe.order(id: 'DESC') 7 end 8 9 def new 10 @recipe = Recipe.new 11 end 12 13 def show 14 @comment = Comment.new #新規コメント用 15 @comments = @recipe.comments.includes(:user) #コメント表示用投稿に関連づくコメントの取得 16 end 17 18 def edit 19 end 20 21 def update 22 if @recipe.update(recipe_params) 23 return redirect_to recipe_path(@recipe) 24 else 25 render 'edit' 26 end 27 end 28 29 def destroy 30 @recipe.destroy 31 redirect_to root_path 32 end 33 34 def create 35 @recipe = Recipe.create(recipe_params) 36 if @recipe.save 37 redirect_to root_path 38 else 39 render 'new' 40 end 41 end 42 43 def search 44 @q = Recipe.ransack(params[:q]) 45 @recipes = @q.result 46 end 47 48 private 49 def recipe_params 50 params.require(:recipe).permit( 51 :dish_name, 52 :ingredient, 53 :make, 54 :introduction, 55 :image, 56 :moon_age_id, 57 :classification_id) 58 .merge(user_id: current_user.id 59 ) 60 end 61 62 def set_recipe 63 @recipe = Recipe.find(params[:id]) 64 end 65 66 def contributor_confirmation 67 redirect_to root_path unless current_user == @recipe.user 68 end 69end
試したこと
create.js.erbファイルの記述に自信がなく、1〜2業目でテキストエリアを空にして、3行目でshow.html.erbの”recipe-commentsクラス”を呼び出し、投稿したコメントを呼び出しているので、動作すると思ったのですがうまくいきませんでした。
補足情報(FW/ツールのバージョンなど)
ruby 2.6.5
Ruby on Rails 6.0.0
わかりにく質問になってしまっているかもしれませんが、よろしくお願いいたします。
情報が足りないなどございましたら、コメントいただけると幸いです。

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/01/30 02:22 編集
2023/01/30 04:03
2023/01/30 04:14
2023/01/30 04:38 編集
2023/01/30 07:29