使用Bootstrap 5.1覆盖Rails www.example.com应用程序中Bootstrap模态的close函数的最佳方法7.0.2.3

bvk5enib  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(109)

我正在寻找覆盖Bootstrap模态javascript close函数的最佳方法。我有一个模态,它弹出一个表单,改变页面上的项目。表单在提交时不会关闭模态。它留在表单上,允许用户创建/删除他们喜欢的标签,呈现turbo_stream.update partial而不是离开模态。
问题是,一旦用户在进行更改后关闭模态,页面上的标记数据就会失效,并且不会反映他们对模态中显示的表单所做的更改。
我希望bootstrap模态close函数重载页面,或者更好地呈现另一个turbo_stream.update partial来更正标记信息。
调用模态/窗体中的视图:

<%= 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()
  }
}
vmdwslir

vmdwslir1#

好的,这样就可以重新加载页面了。我没有把addEventListener放在正确的位置,还有一些语法问题。
我还在努力只渲染涡轮流。更新部分,以避免重新加载整个页面。

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();
      
    })
  }
}

相关问题