Рельсы с частичной формой свернуты в Bootstrap аккордеоне - сделайте проверку Ajax

Question

У меня есть страница-указатель гостевого контроллера, которая показывает имена всех гостей в аккордеоне bootstrap. Когда щелкают имя гостя, запускается аккордеон, и он показывает форму редактирования для этого гостя, где можно изменить данные формы.

Форма настраивается через simple_form_for с remote: true, поэтому при отправке запускается запрос AJAX. Я также настроил проверки для модели Guest (например, validates :name, :last_name, presence: true). Когда форма находится на отдельной странице редактирования, все проверки работают должным образом. Когда я встраиваю форму в bootstrap аккордеон страницы индекса через render partial: 'edit', после отправки AJAX проходит правильно, но аккордеон разрушается. Если я пытаюсь отправить форму с пустым полем имени, когда аккордеон разрушается, на нем не отображается ошибка проверки и происходит сбой обновления формы (т. Е. Поля формы сбрасываются на те, которые хранятся в БД).

I хотел бы при отправке формы, чтобы аккордеон оставался открытым и чтобы необходимые показы отображались при необходимости.

Не уверен, поможет ли это, но я использую Rails 6 с гемами Turbolinks и Turbolinks_render для управления AJAX запросов.

Мой соответствующий Gemfile:

gem 'webpacker', '~> 4.0'
gem 'turbolinks', '~> 5'
gem 'simple_form'
gem 'turbolinks_render'

Контролер моих гостей:

class GuestsController < ApplicationController
  before_action :set_guest, only: [:edit, :update]

  def index
    @guests = Guests.all
  end

  def edit
  end

  def update
    if @guest.update(guest_params)
      redirect_to guests_path
    else
      @guests = Guests.all
      render 'index'
    end
  end

  private

  def set_guest
    @guest = Guest.find(params[:id])
  end

  def guest_params
    params.require(:guest).permit(:name, :last_name)
  end
end

Мой индекс. html .erb:

<div id="accordion">
    <% @guests.each do |guest| %>
      <div class="card">
        <div class="card-header" id="heading<%= guest.id %>">
          <h5 class="mb-0">
            <button id="ciao" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse<%= guest.id %>" aria-expanded="false" aria-controls="collapse<%= guest.id %>">
              <%= "#{guest.name} #{guest.last_name}"%>
            </button>
          </h5>
        </div>
          <div id="collapse<%= guest.id %>" class="collapse" data-parent="#accordion" aria-labelledby="heading<%= guest.id %>">
            <div class="card-body">
              <%= render 'edit', guest: guest %>
            </div>
        </div>
      </div>
  <% end %>
  </div>

Мой _edit. html .erb:

<%= simple_form_for guest, remote: true do |f| %>
  <%= f.input :name %>
  <%= f.input :last_name %>
  <%= f.submit "Submit", class: "btn btn-primary", id: "form_#{guest.id}" %>
<% end %>