質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

0回答

752閲覧

railsでAjaxを用いてコメント機能を実装しています(エラーについての質問)

Jin12

総合スコア1

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/10/05 02:43

編集2021/10/05 02:47

今している事

railsでAjaxを用いてコメント機能を実装しています。
JavaScriptファイルにAjaxのための記述を書いて試しにコメントを送信してみようと思ってみると以下のようなエラー画面が出てしまいました。

このページは動作していません
localhost から無効な応答が送信されました。
ERR_INVALID_REDIRECT

各コード

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 <ul> 48 <li><%= comment.text %></li> 49 </ul> 50<% end %> 51 52 53<%= render "shared/footer" %>

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

controllers/comments_controller.rb

ruby

1class CommentsController < ApplicationController 2 3 def create 4 Comment.create(comment_params) 5 redirect_to "posts/show" 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

javascript/comment.js

javascript

1function post (){ 2 const submit = document.getElementById("submit"); 3 submit.addEventListener("click", () => { 4 const form = document.getElementById("form"); 5 const formData = new FormData(form); 6 const XHR = new XMLHttpRequest(); 7 XHR.open("POST","/posts/show",true); 8 XHR.responseType = "json"; 9 XHR.send(formData); 10 }); 11}; 12 13window.addEventListener('load', post);

コメントの送信ボタンを押した時データベースには保存されていました。
controllers/comments_controller.rbのshowアクションで定義してある保存されたら
redirect_to "posts/show"の部分に問題があるのでしょう?
それとも、そもそもjsファイルの方で間違った記述をしているのでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問