CODEWITHSUNDEEP
javascripthtmx
Adil Mohak
Adil Mohak

Reputation: 375

JavaScript not functioning after htmx get/post request swapped

I'm building a Django project and trying to get and post data using htmx and everything works, which means I can get and post data there is no problem with that, but the problem is after data is swapped the bootstrap dropdown or tooltips or other elements that need some javascript to function including jQuery carousel is no longer working, I think the error is because after htmx swapped there is always new data added or replaced to the DOM, so the new data is no longer supported to any script.

so how can I handle this?

Update:

One solution that comes to my mind is to force the browser to re-load(re-download) scripts without a page refresh, but I have no idea how can I implement this, please help!

Upvotes: 1

Views: 3945

Answers (3)

Axel Fontaine
Axel Fontaine

Reputation: 35169

Moving the Bootstrap JS from the body to the head fixes the issue with Bootstrap 5.3 and HTMX 1.9.10.

After that hx-target with body doesn't kill the Bootstrap components anymore.

Upvotes: 1

sgonline
sgonline

Reputation: 9

can you try with don't extend {% extends 'base.html' %} in swapped form

Upvotes: -1

fbzyx
fbzyx

Reputation: 349

There is no need to reload your js source files. What you need is htmx.onLoad callback.

check here for more information.

htmx.onLoad(function(content) {
    // reinitialize your bootstrap elements here
});

Upvotes: 2

Related Questions