afterRequest, afterSettle events never trigger #79
Comments
|
Can you enable logging w/ htmx.logAll()and see if the events are firing? It might be a bug in |
|
Yes, they do show up in htmx.logAll(): |
|
OK, that looks like a bug in the Can you add an event listener directly to the element? I'm planning on removing the "on" method in the next release. |
|
Which element can I attach these listeners to to make sure I get the same events logAll() sees? |
|
If you look in the log messages in Chrome or Firefox, you should see the element that the event was triggered on and you can usually right click on it and have it revealed in the DOM. |
|
I've changed my test to add listeners to the This is my code now (full file here): function listen(node) {
console.log('set up listeners for', node);
node.addEventListener('beforeOnLoad.htmx', () => console.log('beforeOnLoad'));
node.addEventListener('beforeRequest.htmx', () => console.log('beforeRequest'));
node.addEventListener('afterRequest.htmx', () => console.log('afterRequest'));
node.addEventListener('afterSettle.htmx', () => console.log('afterSettle'));
}
document.querySelectorAll('a').forEach(listen);Trying some different approaches, I also looked into using the extension mechanism, so I used <script>
htmx.defineExtension('kuno-ext', {
onEvent: (name, event) => console.log('kuno-ext', name, event)
});
</script>
</head>
<body hx-ext='kuno-ext'>The extension also doesn't get the afterRequest or afterSettle events, here is the full log after clicking the link: |
|
OK, in the first part I think I see the problem: the anchors are getting swapped out and so the listener isn't working any more. In the second case, that seems like a bug: the afterRequest and afterSettle events should bubble up to the body even if they are on new elements and cause the extension to fire. I'll have to dig into it. Sorry for the issue, I'm currently on vacation but will look at it on Tuesday when I'm back. |
|
@chg20 thanks for looking into it, there's no hurry :) |
|
I can confirm the above, and that |
|
My expectation was that the elt and target of the event would be identical for beforeRequest.htmx and afterRequest.htmx. Specifically the elt moved. Not sure if this is by design. |
|
OK, so I think the problem here is that we are replacing the outerHTML, which causes Hmmm. What's the right thing here? Probably to trigger the event on the replacement element. That's kinda ugly in the code though. |
|
OK, looking at the code, I think we should trigger the events on the replacement content, rather than on the elt, since the elt might have been replaced. Does this sound reasonable? |
…triggering element may have been replaced fixes #79
|
Fixed and tested w/ 6f14cba |
…triggering element may have been replaced fixes bigskysoftware/htmx#79
…triggering element may have been replaced fixes bigskysoftware/htmx#79
Hello! I'm trying to use htmx to navigate an app while only a small part of the page doesn't reload (because it contains an <audio> element playing music).
Some events don't seem to be working, here is a small test file to reproduce the issue:
When I click the link, the #content div reloads correctly (leaving the audio element playing), however only the beforeRequest and beforeOnLoad events get triggered.
I saw this mentioned in #75 , but it didn't seem to have it's own GitHub issue.
The text was updated successfully, but these errors were encountered: