django-htmx-modal-form
django-htmx-modal-form copied to clipboard
Edit Button not firing up the modal
<td>
<button class="btn btn-primary btn-sm" hx-get="{% url 'edit_branch' branch.id %}" hx-target="#dialog">Edit
<li class="fa fa-edit"></li>
</button>
<a href="" class="btn btn-warning btn-sm">
<li class="fa fa-eye"></li>
</a>
</td>
;
(function() {
const modal = new bootstrap.Modal(document.getElementById("modal"))
htmx.on("htmx:afterSwap", (e) => {
// Response targeting #dialog => show the modal
console.log("xxxxxxxxx")
if (e.detail.target.id == "dialog") {
modal.show()
}
})
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
}
})
// Remove dialog content after hiding
htmx.on("hidden.bs.modal", () => {
document.getElementById("dialog").innerHTML = ""
})
})()
This could be an issue with the django side of the implementation, if the request the edit button fires ends up in a 500 error or doesn't return any content then the modal will never open.