RubyonRailsのjsファイル上で部分テンプレートを挿入する方法

Question

前提・実現したいこと

質問ページをご覧いただきましてありがとうございます！

現在RubyonRailsで利用ユーザーが部屋を作成して、作成された部屋を一覧表示する機能を非同期通信で行うべく、JavascriptでAjaxを利用して実装しております。
流れとしては

①ページ上のルーム作成ボタンをクリック
②モーダルウィンドウ上に部屋名と部屋説明を入力するフォームと、作成・キャンセルボタンが表示される。
③フォームに情報を記入後、作成ボタンを押すことでClickイベントが発火し、フォーム内容がRailsの該当コントローラーのCreateアクションへ送信される。
④Createアクション内でフォーム内容をデータベースに登録し、レスポンスを返します。

ここまでの流れは実装済みであり、作成した部屋はリロードを行うことで一覧に表示される仕組みになっています。

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

上記の④から、現状はjavascript上でlocation.reload();にて強制的にリロードをかけることで一覧表示を更新している状態です。
この部分をinsertAdjacentHTMLを使って、レスポンスの情報を元に追加したルーム部分を部分テンプレート化して、この部分テンプレートを挿入して表示させようとしております。（以下のような感じです）

document.getElementById('挿入部分のid').insertAdjacentHTML('beforeend', '<%= render "部分テンプレート名" %>')

ただ当然Javascript上なので、<%= render %>部分は認識されず、文字としてそのまま挿入される状態です。
色々検索をかけてescape_javascriptなどのエスケープを試してみてもダメで、実装方法に詰まっている状態です。
ですので、Javascript上で部分テンプレートを指定する方法や代替案などがあればご教授頂けますと幸いです。

該当のソースコード

(部屋一覧表示部分抜粋)
<div class="room-screen-box">
  <div class="room-screen-lists">

    <% @rooms.each do |room| %>
      <div class="room-screen-list-box">
        <div class="room-screen-list-header">
          <div class="room-screen-list-room-name"><%= link_to room.room_name,"#" %></div>
            <div class="room-screen-list-btn">
              <% unless RoomUser.where(room_id: room.id).exists?(user_id: current_user.id) %>
                <%= form_with model: @roomuser, local: true do |f| %>
                  <input name="room_user[user_id]" type="hidden" value=<%= current_user.id %>>
                  <input name="room_user[room_id]" type="hidden" value=<%= room.id %>>
                  <%= f.submit "参加", class:"room-entry-btn" %>
                <% end %>
              <% else %>
                <div class="room-exist-btn">
                  <%= link_to "退出", room_user_path(room), method: :delete %>
                </div>
              <% end %>
              <% if room.owner_id == current_user.id %>
                <div class="room-delete-btn">
                  <%= link_to "削除", room_path(room), method: :delete, data: { confirm: '本当に削除しても良いですか？' } %>
                </div>
              <% end %>
            </div>
          </div>
        <div class="room-screen-list-body">
          <div class="room-screen-list-owner-name">オーナー名：<%= User.find(room.owner_id).nickname %></div>
          <div class="room-screen-list-create-date">作成日時：<%= room.created_at.to_s(:datetime_jp) %></div>
        </div>
      </div>
    <% end %>

  </div>
</div>

(モーダルウィンドウ部分抜粋)
<div id="modal-room-create" class="modal-room-create">
  <p>ルームの作成</p>
  <%= form_with model: @room, id: 'modal-room-create-form', local: true do |f| %>
  <%= render "devise/shared/error_messages", model: f.object %>
    <div class="field">
      <label class="form-text">ルーム名</label>
      <%= f.text_field :room_name, placeholder:"ルーム名 (20文字以内)", maxlength:"20", class:"form-default" %>
    </div>

    <div class="field">
      <label class="form-text">ルーム説明文</label>
      <%= f.text_field :room_description, placeholder:"ルーム説明 (100文字以内)", maxlength:"100", class:"form-default" %>
    </div>

    <input name="room[user_ids][]" type="hidden" value=<%= current_user.id %>>

    <div class="register-btn">
      <%= f.submit "作成", class:"register-blue-btn", id:"modal-create-btn" %>
    </div>
  <% end %>
  <button class="register-blue-btn" id="room-create-cancel">キャンセル</button>

</div>

<div id="modal-overlay" class="modal-overlay"></div>

（挿入したい部分テンプレート）
<div class="room-screen-list-box">
  <div class="room-screen-list-header">
    <div class="room-screen-list-room-name"><%= link_to room.room_name, room_posts_path(room) %></div>
      <div class="room-screen-list-btn">
        <% unless RoomUser.where(room_id: room.id).exists?(user_id: current_user.id) %>
          <%= form_with model: @roomuser, local: true do |f| %>
            <input name="room_user[user_id]" type="hidden" value=<%= current_user.id %>>
            <input name="room_user[room_id]" type="hidden" value=<%= room.id %>>
            <%= f.submit "参加", class:"room-entry-btn" %>
          <% end %>
        <% else %>
          <div class="room-exist-btn">
            <%= link_to "退出", room_user_path(room), method: :delete %>
          </div>
        <% end %>
        <% if room.owner_id == current_user.id %>
          <div class="room-delete-btn">
            <%= link_to "削除", room_path(room), method: :delete, data: { confirm: '本当に削除しても良いですか？' } %>
          </div>
        <% end %>
      </div>
    </div>
  <div class="room-screen-list-body">
    <div class="room-screen-list-owner-name">オーナー名：<%= User.find(room.owner_id).nickname %></div>
    <div class="room-screen-list-create-date">作成日時：<%= room.created_at.to_s(:datetime_jp) %></div>
  </div>
</div>

(モーダルウィンドウの表示及び部屋作成時の挙動部分抜粋)
window.addEventListener('load', function(){

  const modalRoomCreate = document.getElementById("modal-room-create")
  const modalOverlay = document.getElementById("modal-overlay")
  const roomCreateBtn = document.getElementById("room-create-btn")
  const modalCreateBtn = document.getElementById("modal-create-btn")
  const modalRoomCancel = document.getElementById('room-create-cancel');

  roomCreateBtn.addEventListener('click', function() {
    modalRoomCreate.classList.add("active")
    modalOverlay.classList.add("active")
  })

  modalCreateBtn.addEventListener('click', function(e) {
    e.preventDefault();

    const formData = new FormData(document.getElementById("modal-room-create-form"))
    const XHR = new XMLHttpRequest();
    XHR.open("POST", `/rooms`, true)
    XHR.responseType = "json";
    XHR.send(formData);

    XHR.onload = () => {
      document.getElementById("modal-room-create-form").reset();
      if (XHR.status == 422) {
        alert(`入力項目エラー: ルーム作成のフォームは全て入力してください。`);
        return null;
      }
      else if (XHR.status != 200) {
        alert(`Error ${XHR.status}: ${XHR.statusText}`);
        return null;
      }

      document.getElementById("modal-room-create-form").reset();
      modalRoomCreate.classList.remove("active")
      modalOverlay.classList.remove("active")

      location.reload();
  })

  modalRoomCancel.addEventListener('click', function() {
    document.getElementById("modal-room-create-form").reset();
    modalRoomCreate.classList.remove("active")
    modalOverlay.classList.remove("active")
  })
  modalOverlay.addEventListener('click', function() {
    document.getElementById("modal-room-create-form").reset();
    modalRoomCreate.classList.remove("active")
    modalOverlay.classList.remove("active")
  })
})

(コントローラー部分抜粋)
class RoomsController < ApplicationController
  def index
    @rooms = Room.all.order(created_at: "DESC")
    @room = Room.new
    @roomuser = RoomUser.new
  end

  def create
    @room = Room.new(room_params)
    if @room.save
      render json: { post: @room }
    else
      render json: { post: @room }, status: 422
    end
  end

  def search
    @rooms = Room.search(params[:keyword])
  end

  def destroy
    room = Room.find(params[:id])
    room.destroy
    redirect_to root_path
   end

  private

  def room_params
    params.require(:room).permit(:room_name, :room_description, user_ids: []).merge(owner_id: current_user.id)
  end

end

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

Ruby on Rails６

Answer 1

コントローラ側にてAjaxの返却値をその部分テンプレート（layout false）で返して.insertAdjacentHTML()で追記すれば良いのではないでしょうか。

Comments

[kirsche]

ご回答頂きましてありがとうございます！
頂いたご回答を元にもう一度調べ直しているところであります。

勉強不足で大変申し訳ないのですが、
render layout: falseについては調べて理解させて頂いたのですが
こちらをAjaxの返却値（render json:）としてテンプレートを含めて返し
insertAdjacentHTMLにてどう追記するのかがまだ理解が追いついていない状態です。

引き続きもう一度調べさせて頂きたいと思います！

[m.ts10806]

jsonで返すとJavaScriptによるhtml生成が必要になりますし、テンプレートhtmlも使えません。それにJavaScriptによるhtmlレンダリングは高負荷です。
それなら全て値も埋め込まれたテンプレートhtmlそのものをサーバーから返してそのままinsertAdjacentHTML(追記ではなく上書きならinnerHTMLでもいいと思うけど)に突っ込んだら簡単だし、役割分担にもなるのではと。
私も言語限らずよくやります。

[m.ts10806]

少し時間がたった後の解決ですが、結局どのように対応し解決と至ったのでしょうか。
https://teratail.com/help/question-tips#questionTips4-2