我正在尋找覆寫 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()
}
}
uj5u.com熱心網友回復：
好的，所以這可以重新加載頁面。我沒有把 addEventListener 放在正確的位置加上一些語法問題。
我仍在努力只渲染 turbo-stream.update 部分以避免重新加載整個頁面。
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();
})
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/505031.html
標籤：轨道上的红宝石 推特引导 引导程序 5 ruby-on-rails-7 刺激