使用 Bootstrap 5.1 在 Rails 7.0.2.3 应用程序中覆盖 Bootstrap 模态关闭函数的最佳方法-解网

问：

我正在寻找覆盖 Bootstrap 模态 javascript 关闭函数的最佳方法。我有模态，它弹出一个表单，用于更改页面上的项目。表单在提交时不会关闭模式。它保留在窗体上，允许用户创建/删除任意数量的标签，呈现 turbo_stream.update 部分而不是离开模式。

问题在于，一旦用户在进行更改后关闭模式，页面上的标记数据就会过时，并且不会反映他们对模式中显示的表单所做的更改。

我希望引导模式关闭函数重新加载页面，或者更好地呈现另一个 turbo_stream.update 部分以更正标签信息。

在视图中调用模态/表单：

<%= link_to add_to_deck_tag_path, class: link_class, data: { turbo_frame: 'remote_modal' } do %><i class="bi bi-tag-fill"></i>Add Tag<% end %>

远程模式代码：

<%= turbo_frame_tag "remote_modal" do %>
  <div class="modal fade" id=modalLive" tabindex="-1" data-controller="remote_modal">
    <div class="modal-dialog">
      <div class="modal-content<%= modal_css %>">
        <div class="modal-header">
          <h5 class="modal-title" id="modalLiveLabel"><%= title %></h5>
          <button type="button" class="btn-close<%= button_close_css %>" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div id="remote_modal_body" class="modal-body">
          <%= yield %>
        </div>
      </div>
    </div>
  </div>
<% end %>

javascript 控制器：

import { Controller } from "@hotwired/stimulus"
import { Modal } from "bootstrap"

export default class extends Controller {
  connect() {
    this.modal = new Modal(this.element)
    this.modal.show()
  }
}

Ruby-on-Rails 推特引导引导 Ruby-on-Rails-7 刺激JS

import { Controller } from "@hotwired/stimulus"
import { Modal } from "bootstrap"

export default class extends Controller {
  connect() {
    this.modal = new Modal(this.element)
    this.modal.show()
    this.element.addEventListener('hidden.bs.modal', (event) => {
      location.reload();
      
    })
  }
}

上一个：Turbo Frames 无法从头部识别 Javascript

下一个：带有 bootstrap 的映像的 Rails 路径

使用 Bootstrap 5.1 在 Rails 7.0.2.3 应用程序中覆盖 Bootstrap 模态关闭函数的最佳方法

Best approach to override Bootstrap modal's close function in Rails 7.0.2.3 application with Bootstrap 5.1

评论