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

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

ただいまの
回答率

88.93%

Uncaught TypeErrorで非同期通信ができません。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 237

tomoZQ

score 2

前提・実現したいこと

railsでグループが作成でき、その中で以下2つのことができるアプリを開発しています。
①グループメンバー同士のチャット
②グループごとに場所(store)を登録でき、そのstoreについてメンバーがコメントをすることができる。

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

グループ内のチャットにはmessageというテーブルを作成し、投稿されたデータを非同期通信で実装したところ下記エラーが表示されてしましました。

 Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
    at HTMLDivElement.<anonymous> (message.self-a4cf30b48cb2db425cbccb8b1375c02bc6d692ea7a6450f6f8d193dde52efd9a.js?body=1:56)
    at HTMLDivElement.dispatch (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5227)
    at HTMLDivElement.elemData.handle (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:4879)
(anonymous) @ message.self-a4cf30b48cb2db425cbccb8b1375c02bc6d692ea7a6450f6f8d193dde52efd9a.js?body=1:56
dispatch @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5227
elemData.handle @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:4879

該当のソースコード

#message.js

$(function(){

  function buildHTML(message){
    if ( message.image ) {
      let html =
        `<div class="show-lists__chat-main__message-lists__contents">
            <div class="show-lists__chat-main__message-lists__contents__content">

              <div class="show-lists__chat-main__message-lists__contents__content__left">
                <div class="show-lists__chat-main__message-lists__contents__content__left__name">
                  ${message.user_name}
                </div>
                <div class="show-lists__chat-main__message-lists__contents__content__left__text">
                  ${message.content}
                  <img class=".show-lists__chat-main__message-lists__contents__content__left__text__img" src="${message.image}">
                </div>
              </div>

              <div class="show-lists__chat-main__message-lists__contents__content__right">
                <div class="show-lists__chat-main__message-lists__contents__content__right__time-stamp">
                  ${message.created_at}
                </div>
              </div>

            </div>
          </div>`
      return html;
    } else {
      let html =
      `<div class="show-lists__chat-main__message-lists__contents">
        <div class="show-lists__chat-main__message-lists__contents__content">

          <div class="show-lists__chat-main__message-lists__contents__content__left">
            <div class="show-lists__chat-main__message-lists__contents__content__left__name">
              ${message.user_name}
            </div>
            <div class="show-lists__chat-main__message-lists__contents__content__left__text">
              ${message.content}
            </div>
          </div>

          <div class="show-lists__chat-main__message-lists__contents__content__right">
            <div class="show-lists__chat-main__message-lists__contents__content__right__time-stamp">
              ${message.created_at}
            </div>
          </div>

        </div>
      </div>`
      return html;
    };
  }

  $('.show-lists__chat-main__message-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);
      $('.show-lists__chat-main__message-lists').append(html);      
      $('form')[0].reset();
      $('.show-lists__chat-main__message-lists').animate({ scrollTop: $('.show-lists__chat-main__message-lists')[0].scrollHeight});
      $('.chat-main__message-form__Form__btn-send').prop('disabled', false);
    })
    .fail(function() {
      alert("メッセージ送信に失敗しました");
      $('.chat-main__message-form__Form__btn-send').prop('disabled', false);
    });
  });
});
.show-lists__chat-main__message-form
      = form_with model: [@group, @message], html: {class: ".show-lists__chat-main__message-form"}, local: true do |f|
        .show-lists__chat-main__message-form__contents
          .show-lists__chat-main__message-form__contents__input-space
            = f.text_field :content, class: '.show-lists__chat-main__message-form__contents__input-space', placeholder: 'type a message'
            .show-lists__chat-main__message-form__contents__input-space__label
              = f.label :image, class: '.show-lists__chat-main__message-form__contents__input-space__label' do
                =icon('far', 'image')
                .show-lists__chat-main__message-form__contents__input-space__label__hidden
                  = f.file_field :image, class: '.show-lists__chat-main__message-form__contents__input-space__label__hidden'
          .show-lists__chat-main__message-form__contents__btn-box
            = f.submit 'Send', class: '.show-lists__chat-main__message-form__contents__input-space__btn-box__Send'
class MessagesController < ApplicationController
  before_action :set_group

  def index
    @message = Message.new
    @messages = @group.messages.includes(:user).order("created_at DESC")
  end

  def create
    @message = @group.messages.new(message_params)
    if @message.save
      respond_to do |format|
        format.json
      end
    else
      @messages = @group.messages.includes(:user)
      flash.now[:alert] = 'メッセージを入力してください。'
      render :index
    end
  end


  private

  def message_params
    params.require(:message).permit(:content, :image).merge(user_id: current_user.id)
  end

  def set_group
    @group = Group.find(params[:group_id])
  end
end

試したこと

ターミナルで確認したところメッセージがas htmlになっていました。$ajaxの中でjsonを指定しているのにも関わらずこうなってしまっているところにも原因があるのでしょうか?
当方初学者のため、google等で検索しましたが、中々回答にたどり着けなく、質問させていただきます。

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

MySQL 5.6.47
sequel Pro
Rails 6.0.3.2

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2020/07/16 18:35

    内容これではタグ足りないのでは。
    Ruby前提ならその関係のタグも必要ですし、あとHTMLは必要ですね。

    キャンセル

  • tomoZQ

    2020/07/16 18:41

    ありがとうございます。タグ増やします。

    キャンセル

  • tomoZQ

    2020/07/17 01:35

    申し訳ありません、「HTMLは必要」の意味を履き違えてました、ソースコード追加致しましたのでよろしくお願い致します。

    キャンセル

回答 1

check解決した方法

0

hamlの構造を

.chat-main
  .chat-main__message-form
    = form_with model: [@group, @message], html: {class: "chat-main__message-form__Form"}, local: true do |f|
      .chat-main__message-form__Form__contents
        = f.text_field :content, class: 'chat-main__message-form__Form__contents__message', placeholder: 'type a message'
        .chat-main__message-form__Form__contents__imgbox
          = f.label :image, class: 'chat-main__message-form__Form__contents__imgbox__label' do
            = icon('far', 'image', class: 'chat-main__message-form__Form__contents__imgbox__label__icon')
            = f.file_field :image, class: 'chat-main__message-form__Form__contents__imgbox__label__file-field'
      = f.submit 'Send', class: 'chat-main__message-form__Form__btn-send'


と変更することで解消。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る