railsチャットアプリにおける非同期通信実装時に出会ったエラー(ページが遷移してしまう問題)の解決策をご教授頂きたいです。

Question

解決したいこと

raisで実装中のチャットアプリにて、相互フォローユーザ間で作られた1対1のトークルームにおけるメッセージのやり取りを非同期通信にしたいと思い実装を行ったのですが、現状では下記の画像のようにメッセージ送信後、画面遷移が行われてしまいます。

①【url: rooms/[:id]のチャットページにて、メッセージを入力し、送信ボタンを押すと...】

②【url: messagesのページへ移り、保存された情報が表示されてしまう。】

記述したrubyのコード(messages_controller.rb)

  def create
    if Entry.where(user_id: current_user.id, room_id: params[:message][:room_id]).present?
      message = Message.create(message_params)
      render json:{ message: message }
    else
      flash[:alert] = "メッセージ送信に失敗しました。"
    end
  end

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

記述したJavaScriptコード(message.js)

function chat() {
  const submit = document.getElementById("submit");
  submit.addEventListener("click", (e) => {

    e.preventDefault();
    const formData = new FormData(document.getElementById("form"));
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/messages", true);
    XHR.responseType = "json";
    XHR.send(formData);
    XHR.onload = () => {
      if (XHR.status != 200){
        alert(`Error ${XHR.status}: ${XHR.statusText}`);
        return null;
      }
      const item = XHR.response.message;
      const list = document.getElementById("list")
      const formText = document.getElementById("content-message")
      const HTML = `
    <div class="chat-box">
      <div class="chat-face">
      if (${message.user.avatar}.attached?){
        <img src="${message.user.avatar}", class="icon-image-mini">
      }
      </div>
      <div class="chat-message"><strong>${message.content}</strong><br>
        l ${message.created_at}
      </div>
    </div>
 `;
    list.insertAdjacentHTML("afterend", HTML);
    formText.value = "";
    };
  });
}

window.addEventListener("load", chat);

記述したHTMLビューファイル

<div class="messages", id="message">
  <div class="chat-header">
    <div class="left-button">
      <%= link_to '〇〇さんとのチャットルーム', root_path %>
    </div>
    <div class="room-exit"><%= link_to 'トップページに戻る', root_path %></div>
  </div>
  <% @entries.each do |e| %>
    <div class="user-name">
      <strong>
        <% if e.user.avatar.attached? %>
          <%= image_tag e.user.avatar, class:"icon-image" %>
        <% end %>
        <a class="room-user-link" href="/users/<%= e.user.id %>">
          <%= e.user.name%>さん
        </a>
      </strong>
    </div>
  <% end %>
  <hr>
  <div class="chats">
    <div class="chat">
      <% if @messages.present? %>
        <% @messages.each do |m| %>
          <div class="chat-box">
            <div class="chat-face">
            <% if m.user.avatar.attached? %>
              <%= image_tag m.user.avatar, class:"icon-image-mini" %>
            <% end %>
            </div>
            <div class="chat-message"><strong><%= m.content %></strong><br>
              <%= l m.created_at %>
            </div>
          </div>
      <% end %>
      <% end %>
      <div id="list" ></div>
    </div>
  </div>
</div>
<div id="chat">
<span id="video-end">ビデオ通話を止める</span>
 <chat />
</div>
<%= javascript_pack_tag 'chat' %>
<%= stylesheet_pack_tag 'chat' %>
<div class="form">
    <%= form_for @message, id: "form", class: "post" do |f| %>
      <div class="post-message">
        <%= f.text_field :content, placeholder: "メッセージを入力してください", size: 70, class:"form-text-field", id:"content-message" %>
        <%= f.hidden_field :room_id, value: @room.id %>
         <%= f.submit '送信', class:"form-submit", id: "submit" %>
         <input type="button" value="ビデオ通話を始める", class="form-submit", id= "video-button"> 
      </div>
    <% end %>
</div>

生じているconsoleエラー

message.js:4 Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
    at HTMLInputElement.<anonymous> (message.js:4)

試したこと

DBには送信した内容が正しく保存されていたことから、通常のcreateアクションが働いてしまっているため、上記のような挙動になっているのかと思い、e.preventDefault();を追加しました。が、追加した場所が悪いのか挙動に変化はありませんでした。

また、messageの保存作業がmessageコントローラーのcreateアクションで行われているのに対して、保存したメッセージの表示場所をroomsコントローラーのindexのshowアクションに設定していることが原因かとも考えましたが、具体的な解決策は浮かびませんでした。

稚拙な質問で申し訳ありませんが、ご回答頂けると幸いです。

その他、補足情報

Mac OS Catalina 10.15.4
ruby 2.6系
rails 6.0系
を使っております。
また、message.jsファイルはapplication.jsに読み込み済みです。

Comments

[maisumakun]

ビューのHTMLはどのようになっていますか？

[ka234]

コメントありがとうございます。ビューファイルの追記を行いました！！

Answer 1

e.preventDefault()のタイミングがおかしいです。

e.preventDefault()がXHR.onloadの中に入っていますので、クリックの際にはe.preventDefault()が呼ばれず、そのままフォームとしての送信が始まってしまいます（XHR.onloadで実行しても手遅れです）。

clickのハンドラ直下でe.preventDefault()を行うか、そもそもフォーム送信が行われないtype="button"のボタンを使うかをしましょう。

Comments

[ka234]

ご回答ありがとうございます！clickのハンドラ直下でpreventDefaultを行う方法と、type=buttonにフォームを変更する方法それぞれ行ってみました。すると、画面遷移の問題は解決したのですが、ボタンを押してもメッセージが投稿されない問題が生じてしまいました。なおconsoleでは、下記のようなメッセージが表示されていました。重ね重ね申し訳ございませんが、想定される原因などご回答いただけますでしょうか？

【エラーメッセージの内容】
message.js:4 Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
at HTMLInputElement.<anonymous> (message.js:4)