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

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

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

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1288閲覧

JSONでの非同期通信ができず、固まる(errorも出ない)

taku-s

総合スコア12

JSON

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2020/07/13 12:25

前提・実現したいこと

チャットアプリを作成中です。
JSONでの非同期通信で、チャットができるようにしたいです。

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

送信ボタンを押すと、画面が固まってしまい、ターミナルを確認すると
Started POST "/items/7/messages" for ::1 at 2020-07-13 21:02:11 +0900
Processing by MessagesController#create as JSON

(1.0ms) COMMIT
↳ app/controllers/messages_controller.rb:14:in `create'
Rendering messages/create.json.jbuilder

と書かれているので、JSONに割り振りはできているみたいです。

しかし、非同期で通信はされません。
リロードすると、チャットメッセージはブラウザに現れますが、HTMLで現れます。

画面にはエラー文が出てこず、byebugを使用しexitをした時にCompleted 500 Internal Server Error in 22582ms (ActiveRecord: 2.1ms | Allocations: 72285)と現れます。

####messages_controller.rb

class MessagesController < ApplicationController def index @item = Item.find(params[:item_id]) @message = Message.new @messages = @item.messages.includes(:shop) end def create @item = Item.find(params[:item_id]) @message = @item.messages.new(message_params) if @message.save respond_to do |format| format.json end else @messages = @item.messages.includes(:shop) flash.now[:alert] = 'メッセージを入力してください。' render :index end end

####create.json_jbuilder

create.json_jbuilder

1 2json.user_name @message.shop.name 3json.created_at @message.created_at.strftime("%Y年%m月%d日 %H時%M分") 4json.content @message.content 5json.id @message.id 6 7 8 9``` 10 11####message.js

$(function(){
function buildHTML(message){
let html =
<div class="MessageAll"> <div class="Iineimg"> <p class="Iine"> <img alt="いいね:" class="iine" src="/assets/heart-3c2a41f503ccb9ec8e27a3e00f4bbed496c2e78247236aa9a8f9843aa5eb2246.png"> </p> </div> <div class="MessageBox" data-message-id=${message.id}> <div class="use"> <div class="user1"> <div class="user1-name"> ${message.users_name} </div> <div class="user1-createdup"> ${message.created_at} </div> </div> <p class="Message__content"> ${message.content} </p> </div> </div> </div>
return html;
};
$('.form').on('submit', function(e){
e.preventDefault();
let formData = new FormData(this);
let url = $(this).attr('action')
$.ajax({
url: url,
type: "POST",
data: formData,
dataType: 'json',
processData: false,
contentType: false
})
.done(function(data){
let html = buildHTML(data);
})
});
});

### 試したこと ブラウザからの検証、ネットワークにエラー文が出ていないか確認したが、特になし。 js ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。

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

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

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

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

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

maisumakun

2020/07/13 12:45

> 画面にはエラー文が出てこず、byebugを使用しexitをした時にCompleted 500 Internal Server Error in 22582ms (ActiveRecord: 2.1ms | Allocations: 72285)と現れます。 Railsサイドのログファイルに、なにか残っていませんか?
taku-s

2020/07/13 14:02 編集

ご返答ありがとうございます。 先ほどログファイルを確認してみたのですが、 お昼頃に2回 ActionView::Template::Error (can't modify string; temporarily locked): といった表記が残っていて気になりました(固まってしまっているので、ロックされているのかなと)。 それ以降は同様の表記は出ていませんでした。
guest

回答1

0

自己解決

理由がしっかり理解できていないのですが、一度別の場所(送信ボタンを押したら、ボタンが固まってしまうシステムを直す)を実装したところ、非同期通信できるようになりました。
具体的には
.done(function(data){
let html = buildHTML(data);
$('.MessageBoxMain').append(html);
$('form')[0].reset();
$('.MessageBoxMain').animate({ scrollTop: $('.MessageBoxMain')[0].scrollHeight});
$('input.submit-btn').prop('disabled', false);
})
を記述したところ非同期できるようになりました。

投稿2020/07/14 02:01

taku-s

総合スコア12

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問