我正在寻找覆盖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()
}
}
1条答案
按热度按时间vmdwslir1#
好的,这样就可以重新加载页面了。我没有把addEventListener放在正确的位置,还有一些语法问题。
我还在努力只渲染涡轮流。更新部分,以避免重新加载整个页面。