django-htmx-modal-form
django-htmx-modal-form copied to clipboard
modal.hide & oob content
This code is great and versions have helped with lots of modals, but I found one flaw/issue. The if statement below fails to trigger if there is any content in the response, however if you have non-modal content included (ie an oob
swap used for toasts or something) causes it not to fire (since there is a response). Any ideas on how to detect if there is no core swap response (ignoring oob
content or otherwise)?
htmx.on("htmx:beforeSwap", (e) => {
// Empty response targeting #dialog => hide the modal
if (e.detail.target.id == "dialog" && !e.detail.xhr.response) {
modal.hide()
e.detail.shouldSwap = false
}
})
Hi @dwasyl,
I addressed this issue in the blog post; see "Compatibility with the modal form pattern" toward the end.
In short, the (inelegant) solution consists in disabling the primary swap with HX-Swap: none
and closing the modal with an additional HX-Trigger
event.
Best regards, Benoit