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

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

新規登録して質問してみよう
ただいま回答率
85.35%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

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

Ajax

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

Q&A

解決済

1回答

1263閲覧

非同期通信がうまくできません

987654321

総合スコア28

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

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

Ajax

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

0グッド

0クリップ

投稿2020/05/12 01:40

前提・実現したいこと

railsでチャットアプリを作成しております。
コメント部分の非同期通信を行っております。
送信ボタンを押してコメントを送信してもコンソール上で下記のエラーが起きてしまいます。
500なのでjsonの記述がおかしいと思い見直したのですが、うまくいきませんでした。
ご教授いただけることがありましたら、何卒宜しくお願いいたします。

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

console

1POST http://localhost:3000/teams/1/comments 500 (Internal Server Error)

該当のソースコード

comment.js

jquery

1$(function(){ 2 3 function buildHTML(comment){ 4 var html = `<div class="comments__comment"> 5 <div class="comments__comment__text"> 6 <p> ${comment.comment} </p> 7 </div> 8 <div class="comments__comment__info"> 9 <div class="comments__comment__info__name"> 10 <%= link_to ${comment.user.name}, user_path(${comment.user}) %> 11 </div> 12 <div class="comments__comment__info__time"> 13 ${comment.created_at} 14 </div> 15 </div> 16 </div>` 17 } 18 19 $('#new_comment').on('submit', function(e){ 20 e.preventDefault(); 21 var formData = new FormData(this); 22 var url = $(this).attr('action'); 23 $.ajax({ 24 url: url, 25 type: "POST", 26 data: formData, 27 dataType: 'json', 28 processData: false, 29 contentType: false 30 }) 31 .done(function(data){ 32 var html = buildHTML(data); 33 $('.comments').append(html); 34 $('.form__box__text-field').val(''); 35 $('.form__box__btn').prop('disabled', false); 36 }) 37 .fail(function(){ 38 alert('error'); 39 }) 40 }) 41});

create.json.jbuilder

json

1json.comment @comment.comment 2json.user.name @comment.user.name 3json.user @comment.user 4json.created_at @comment.created_at.strftime("%Y-%m-%d %H:%M")

comments_controller.rb

controller

1 def create 2 @comment = Comment.create(comment_params) 3 respond_to do |format| 4 format.html { redirect_to "/teams/#{@comment.team.id}/chat" } 5 format.json 6 end 7 end

chat.html.haml

haml

1.comments-box 2 .comments 3 - @comments.each do |comment| 4 .comments__comment 5 .comments__comment__text 6 = comment.comment 7 .comments__comment__info 8 .comments__comment__info__name 9 = link_to "#{comment.user.name}", user_path(comment.user) 10 .comments__comment__info__time 11 = comment.created_at.strftime("%Y-%m-%d %H:%M") 12 13 14 .comment__form 15 -if current_user 16 = form_for [@team, @comment] do |f| 17 .form__box 18 = f.label :comment, "コメント" , class: "form__box__label" 19 = f.text_field :comment, class: "form__box__text-field" 20 21 = f.submit "送信", class: "form__box__btn" 22 - else 23 %p 24 ログインしてくだい

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

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

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

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

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

winterboum

2020/05/12 02:26

logをみるともうすこし情報があると思うので、その部分  Started POST から次のStartedまで を見せてください
987654321

2020/05/12 02:32

winterboumさん せっかくメッセージ頂いたのに申し訳ありません。 json.user.name @comment.user.name を json.user_name @comment.user.name に直したら解決しました。 お騒がせして申し訳ありません。
guest

回答1

0

自己解決

json.user.name @comment.user.name

json.user_name @comment.user.name

投稿2020/05/12 02:32

987654321

総合スコア28

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問