0

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!

Adil Mohak
  • 240
  • 2
  • 11
  • You have to apply the 3rd party JS functions on the new elements after the HTMX swap. Have you read the [3rd Party JavaScript](https://htmx.org/docs/#3rd-party) section in the documentation? There's an example how to do it. – Dauros Mar 25 '22 at 08:57
  • Have you taken a look at [onLoad](https://htmx.org/api/#onLoad)? Example SO question [here](https://stackoverflow.com/questions/67988846/htmx-onload-on-full-page-load-and-on-after-swap) – Alireza Farahani Mar 25 '22 at 09:01

2 Answers2

1

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
});
fbzyx
  • 189
  • 1
  • 16
-1

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

sgonline
  • 7
  • 6
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 21 '22 at 10:59