bigskysoftware / bigskysoftware/htmx

hx-target and hx-swap prevent hx-on::xhr:loadend from firing.

Open
#2,427 1 comment 1 reaction 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.