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

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

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

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

JavaScript

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

Q&A

解決済

1回答

908閲覧

railsとJavascriptを使って非同期通信でコメントを投稿したい

MSSS.

総合スコア5

Ruby on Rails 6

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

JavaScript

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

0グッド

0クリップ

投稿2020/12/17 07:00

編集2020/12/21 03:24

前提・実現したいこと

ある投稿にネストしているコメント機能を非同期通信でコメントできるように
実装したいのですが、現状非同期にもならずハッシュで出されてしまっています。

発生している問題・エラーメッセージ

例:
aaaaというコメントを投稿した結果

{"comment":{"id":81,"text":"aaaa","user_id":1,"preschool_id":5,"created_at":"2020-12-17T15:53:40.398+09:00","updated_at":"2020-12-17T15:53:40.398+09:00"}}

というハッシュのみが画面遷移後表示される

↓comment.js

Javascript

1function comment(){ 2 const submit = document.getElementById("submit"); 3 submit.addEventListener("click",(e)=>{ 4 const formData = new FormData(document.getElementById("comment-form")); 5 const XHR = new XMLHttpRequest(); 6 XHR.open("POST", `/preschools/${preschoolId}/comments`, true); 7 XHR.responseType ="json"; 8 XHR.send(formData); 9 XHR.onload = () => { 10 if (XHR.status != 200) { 11 alert(`Error ${XHR.status}: ${XHR.statusText}`); 12 return null; 13 } 14 const list = document.getElementById("comment-list"); 15 const formText = document.getElementById("comment-content"); 16 const HTML = ` 17 <li class="comments_list"> 18 <%= comment.text%> 19 <%= link_to "#{comment.user.nickname}さん", "/users/#{comment.user_id}",class: :comment_user %> 20 </li>`; 21 list.insertAdjacentHTML("afterend", HTML); 22 formText.value = ""; 23 }; 24 e.preventDefault(); 25 }); 26 27} 28 29window.addEventListener("load", comment);

↓commentコントローラー

class CommentsController < ApplicationController def create @comment = Comment.create(comment_params) render json:{ @comment :post} end

とすると文法のエラーになりました。。

補足情報(FW/ツールのバージョンなど)

rails 6.0

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

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

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

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

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

guest

回答1

0

自己解決

preschoolIdを指定していなかったことによるミスでした。
data-idで取得することにより解決いたしました。

投稿2020/12/21 03:25

MSSS.

総合スコア5

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問