bigskysoftware / bigskysoftware/htmx

htmx:oobErrorNoTarget event does not trigger

Open
#2,314 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
49.4k
Forks
1.7k
Avg merge
3d 22h
Merged PRs (30d)
30

Description

I can't get a [htmx:oobErrorNoTarget ](https://htmx.org/events/#htmx:oobErrorNoTarget) event to trigger.

>This event is triggered when an [out of band swap](https://htmx.org/docs/#oob_swaps) does not have a corresponding element in the DOM to switch with.

This minimal example I believe should trigger a htmx:oobErrorNoTarget event because there is no `#item-12345` element.

Interactive example: https://jsfiddle.net/8mwk2fha/

```html


htmx:oobErrorNoTarget event demo







// mock a xhr response
const server = sinon.fakeServer.create();
server.autoRespond = true;
server.respondWith('<div id="item-12345" hx-swap-oob="true">item 12345 element</div>');

const logger = (e) => console.log(e.type, e)
htmx.on('htmx:beforeSwap', logger);
htmx.on('htmx:oobBeforeSwap', logger);
htmx.on('htmx:oobAfterSwap', logger);
htmx.on('htmx:oobErrorNoTarget', logger);

```
-----

From what I see, the code ([link](https://github.com/bigskysoftware/htmx/blob/fa7223391ccab52eb69c083e0f2996410f8a65b7/src/htmx.js#L814)) that triggers the event can never fire.
```js
function oobSwap(oobValue, oobElement, settleInfo) {
var selector = "#" + getRawAttribute(oobElement, "id");
[...]
var targets = getDocument().querySelectorAll(selector);
if (targets) {
[...]
} else {
oobElement.parentNode.removeChild(oobElement);
triggerErrorEvent(getDocument().body, "htmx:oobErrorNoTarget", {content: oobElement});
}
```
The `querySelectorAll(selector)` is always a truthy value.

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.