Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modal doesn't work as expected when combined with HTMX #823

Open
SimonaSvekjaroska-ZeroPlex opened this issue Feb 29, 2024 · 1 comment
Open

Comments

@SimonaSvekjaroska-ZeroPlex
Copy link

Describe the bug
I am trying to dynamically change the content of the modal with HTMX, when I trigger the modal it shows only for a split second and then it closes, leaving me only with the backdrop.
The button from where I am triggering the model is

<li> <a hx-get="{{ route('suppliers.edit', $supplier->id) }}" hx-swap="innerHTML" hx-trigger="click" hx-target="#static-modal-holder" hx-on::after-swap="showModalWindow('static-modal')" href="{{ route('suppliers.edit', ['id' => $supplier->id]) }}" data-modal-target="static-modal" data-modal-toggle="static-modal" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Edit</a> </li>

`function showModalWindow(id) {
initFlowbite();
const modal = FlowbiteInstances.getInstance('Modal', id);
modal.show();

        }`

It appears that after I try to open the model from the edit section, the model from Create opens up with the same content that I dynamically sent for Edit. Seems like the model is not initializing again but using the previous content.

@sumantagogoi
Copy link

on htmx swap, the event listeners are removed from the elements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants