I have a HTMX page with a websocket connection that serves OOB updates to DOM.
Whenever a file changes on server it sends a script tag that invokes a JS function:
<div hx-swap-oob="innerHTML" id="__dev_scratch"><script>devReloadTriggered();</script></div>
In case the file change produces an error, the server will send this update:
<div hx-swap-oob="innerHTML" id="__dev_scratch"><div id="dev-reload-error">Unable to resolve symbol: sss in this context</div><div id="dev-reload-error-ns">portal.response</div><script>devReloadTriggered();</script></div>
The devReloadTriggered
script detects presence of these error text divs and shows an alert box.
This all works fine individually. The problem is when the error is removed, so when after the error text divs have been added, server sends again:
<div hx-swap-oob="innerHTML" id="__dev_scratch"><script>devReloadTriggered();</script></div>
In this case the error box is shown again, which would indicate that devReloadTriggered
is ran again before divs with error are removed by HTMX. How do I prevent this? Why does it run the script before removing the divs?