bigskysoftware / bigskysoftware/htmx
hx-target and hx-swap prevent hx-on::xhr:loadend from firing.
- Dominant language
- JavaScript
- Stars
- 49.4k
- Forks
- 1.7k
- Avg merge
- 3d 22h
- Merged PRs (30d)
- 30
Description
# The Problem
When an Element has a `hx-swap` or `hx-target` attribute, some of the `hx-on::xhr` - Event seem to stop working.
# Code-Example
```html
Timer 2:
×
... other buttons
```
# Context
In this case I have a button, that should delete a parent container multiple levels above it.
It should do so, only after the server responded with a successfull response in the 200 range.
So as a `hx-target` I set the parent container. As `hx-swap` I set `delete`.
That part works fine.
But then I also need to update other parts of the Application.
So for that, the idea was to triggering a Javascript function in one of the events.
`hx-on::xhr:loadend` sounded ideal for that.
But as long as the button has the `hx-target` or `hx-swap` attributes `hx-on::xhr:loadend` will not fire.
It only fires, if both attributes are removed.
# Technical analyses
After digging into the code a bit, I think I see, what is happening.
`hx-swap` does its thing (in my case `swapDelete`), before the `hx-on::xhr:loadend` event is fired.
Since the target is a parent element, of the button, the button is cleaned up together with it.
That means the `deInitOnHandlers` is eventually called on the button during the targets cleanup.
Which means, the listener is removed from the Button, before `hx-on::xhr:loadend` can fire.
I don't think I have enough experience with the Project to solve that one. Sorry.
Contributor guide
Assessment
This issue has not been assessed yet.