当转到上一个链接时，Rails 中的 Bootstrap 模式会自动打开

Question

我一直在关注 this 视频教程系列，使用 Bootstrap v5.3 作为 CSS 框架并在 javascript 端使用 Stimulus(Turbo) 创建 Rails 7 应用程序。

基本上，我想要一个引导模式来渲染表单、创建资源和查看我已经实现的资源。

问题是，每当我在

/documents

路线中打开模态并关闭它时，由于某种原因，我必须访问另一条路线，但是当我返回

/documents

路线时，模态会自动打开。

这是我按照视频教程编写的代码

application.html.erb

<main>
  <%= turbo_frame_tag 'remote_modal'  %>
</main>

sidebar.html.erb

<%= link_to new_document_path, class: "nav-link align-middle px-0", data: {controller: 'document-modal'} do %>
    <i class="fs-4 bi-plus-square-fill"></i> <span class="ms-1 d-none d-sm-inline">New log</span>
<% end %>

document_modal_controller.js

import { Controller } from '@hotwired/stimulus';

// Connects to data-controller="document-modal"
export default class extends Controller {
  connect() {}

  initialize() {
    this.element.setAttribute('data-action', 'click->document-modal#showModal');
  }

  showModal(event) {
    event.preventDefault();
    this.url = this.element.getAttribute('href');
    fetch(this.url, {
      headers: {
        Accept: 'text/vnd.turbo-stream.html',
      },
    })
      .then((response) => response.text())
      .then((html) => Turbo.renderStreamMessage(html));
  }
}

bs_modal_controller.js

import { Controller } from '@hotwired/stimulus';

// Connects to data-controller="bs-modal"
export default class extends Controller {
  connect() {
    this.modal = new bootstrap.Modal(this.element);
    this.modal.show();
  }

  disconnect() {
    this.modal.hide();
  }

  submitForm(event) {
    this.modal.hide();
  }

  hideBeforeRender(event) {
    if (this.isOpen()) {
      event.preventDefault();
      this.element.addEventListener('hidden.bs.modal', event.detail.resume);
      this.modal.hide();
      console.log(this.modal);
    }
  }

  isOpen() {
    return this.element.classList.contains('show');
  }
}

_form_modal.html.erb

<%= turbo_frame_tag :remote_modal, target: :_top do %>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
        data-controller="bs-modal">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Create new document</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <%= render "form", document: document %>
        </div>
    </div>
    </div>
<% end %>

new.turbo_stream.erb

<%= turbo_stream.replace "remote_modal" do %>
  <%= render "form_modal", document: @document %>
<% end %>

_form.html.erb

 <%= f.submit class: "btn btn-primary", data: {action: "click->bs-modal#submitForm"} %>

我已经尝试清除浏览器的缓存。

任何帮助将不胜感激

Answer 1

我的应用程序目前遇到类似的问题，我是堆栈溢出的新用户，因此不允许我创建评论，但我很好奇您是否设法解决了该问题？已经9个月了，希望你能做到，请告诉我🙏