htmx htmx:targetError

I get a htmx:targetError is the element I'm targeting does not exist. Do you know if there's a way to fire the htmx request regardless of the element existing or not?

Sep 22 '23 13:09 mollerhoj

I don't think you can with hx-target If your target element may or may not exist in the DOM, I think you should probably use OOB swap instead, which will swap the element if it exists, and do nothing if it doesn't You could then use hx-target="this" with hx-swap="none" if you don't have anything else to swap, and let the OOB swap take care of that potentially missing element

Sep 22 '23 18:09 Telroshan

That's unfortunate. OOB swap does not fit my use case, as I'd have to manipulate the response, and the response is used elsewhere for other functionality.

Is there no way to tell HTMX to fire a request, but ignore the response? hx-target='none' would seem like a nice addition. (In my case, I could add custom javascript to check if the target element exists, and otherwise replace it with none)

Sep 23 '23 08:09 mollerhoj

Is there no way to tell HTMX to fire a request, but ignore the response?

Well if you don't care about the response, you can use hx-target="this" hx-swap="none", the hx-target value doesn't matter when you have hx-swap set to none as no swapping will occur on the target, but I like to use "this" for those cases as I'm sure it'll never fire a targetError

Sep 23 '23 08:09 Telroshan

Ok, that seems like a decent solution. But I'd propose to either support hx-target="none" or to allow hx-target to target non-existing elements.

Sep 23 '23 09:09 mollerhoj

hx-target="none" sounds reasonable to me, I suppose it wouldn't require a hx-swap value and ignore it even if it was defined If you're interested in suggesting an implementation, feel free to submit a PR!

Sep 23 '23 14:09 Telroshan

this is also a problem when trying to do something like this

<body hx-boost="true" hx-target="this > main">
  <nav hx-get="nav.html" hx-trigger="load"></nav>\
  <main></main>
</body>

EDIT: okay, so actually the issue is that hx-target is inherited to the nav, so it loads wrong. Very unintuitive that this is the same attr.

This seems to be the solution, and it's straight up bad.

<body>
<nav hx-get="nav.html" hx-trigger="load" hx-target="#asdf">
<div id = "asdf" hx-boost="true" hx-target="#main" ></div>
</nav>

<main id = "main"></main>
</body>

Under what circumstances is it useful to have a hx-target of an hx-get element inherit to those below it. ??

Nov 27 '24 21:11 blueforesticarus

Under what circumstances is it useful to have a hx-target of an hx-get element inherit to those below it. ??

I also personally don't like inheritance by default, but we cannot change this default anymore, as it would be a breaking change. Note that you can either use hx-disinherit to explicitly disable inheritance of some attributes, or, disable inheritance by default with the htmx.config.disableInheritance property, then use hx-inherit to use explicit inheritance where needed instead

Nov 28 '24 07:11 Telroshan