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

前提・実現したいこと

チャットアプリを作成中です。
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/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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 編集

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

行動規範の内容に同意します

回答1件

自己解決

理由がしっかり理解できていないのですが、一度別の場所（送信ボタンを押したら、ボタンが固まってしまうシステムを直す）を実装したところ、非同期通信できるようになりました。
具体的には
.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);
})
を記述したところ非同期できるようになりました。