0

I'm creating a web app dashboard (Django + htmx), and I only want to load the plugins that the user needs and not load every single plugin immediately because it would slow down the site. Example: The user clicks a button, and the whole HTML body gets replaced with a Wysiwyg editor. Whats the best way to dynamically load a JS library after a htmx request?

computerabuser
  • 45
  • 1
  • 6

1 Answers1

2

If you include the script in the response it will get loaded together with the HTML.

<div>Your Plugin</div>
<script type="text/javascript" src="your_plugin.js"></script>

EDIT: To place scripts to footer for example you can use htmx swap oob https://htmx.org/attributes/hx-swap-oob/.

preator
  • 984
  • 5
  • 6
  • Yes thank you, but im already aware of this. The problem is that with this method you get script tags in the middle of your html body which is kinda ugly and you may run into other problems depending on how sophisticated your web app is. Thats why I wondered if theres a better method than this. – computerabuser Aug 19 '22 at 07:49
  • 1
    you can use swap oob to place it in the footer for example https://htmx.org/attributes/hx-swap-oob/ – preator Aug 19 '22 at 08:51
  • I added it to the answer – preator Aug 19 '22 at 10:45
  • That's great. but there is an interesting problem for libraries which are dependencies for scripts inside partial page. it is mentioned in [this question](https://stackoverflow.com/questions/76028635/how-to-solve-htmx-partial-page-load-issue-caused-by-parallel-script-download). any ideas? – Towhid Apr 20 '23 at 11:33
  • I think you should not load dependencies on each refresh. But in case it is necessary you need to insert your scripts dynamically and on their load event proceed with the rest of the code. Benefit also will be that it can be handled so dependency is loaded just once into the head of the main page. See https://stackoverflow.com/a/69616316/5173936 for dynamic script loading – preator Apr 27 '23 at 11:11