Pattern to have both href and e.g. hx-post on a link

[timofurrer]

I have a somewhat unusual situation where it would be nice to trigger a hx-post in the background when clicking on link that already has a href attribute. I'd want the href to behave normally - e.g. opening a new page, but still have hx-post triggered. It could be that href would wait until hx-post is successful.

Is there anything that HTMX offers out of the box or do I have to stick together some JS / hyperscript to make that work?

[Telroshan]

Hey, there's no native way to do exactly what you described but you can probably achieve the same result with existing ways.

Having hx-post on a link will prevent its default behavior (opening a new page) on click as htmx will intercept the click event.

Considering a setup where both endpoints are under your control and within your backend; I would advise trying to batch such requests together, as why make your user wait for an extra roundtrip to the server, if you can handle both within the same request and spare a useless waiting time?

• You might simply get that result by redirecting your user. Setting the header HX-Redirect from your backend after that POST request will technically only make your client open that new page once the request is done.
  Issue: Right click -> open in new tab will not trigger that POST request and simply open the other page in a new tab. This might or might not be what you want
• You might add a URL parameter within your href's and simply handle that as an additional action in your backend's GET handler. This parameter would let you know that this person came to this page by clicking on that specific link you'd like to trigger an additional action for, and conditionally do other stuff on your backend.
  This would handle "open in new tab" just fine as the action data would be embedded in the URL itself.
  Issue: when on the page, simply refreshing would trigger that conditional action once again, so you might want to still force a redirect, to the same page but without that URL param, or remove that param from JS. Again, might be or might not be what you want, depends on your needs and your situation

If those 2 ideas don't fit your needs, then I'm afraid you might indeed need some custom JS/hyperscript to handle that as you wish.
There could be a dirty approach using an inline hx-trigger condition + an inline hx-on handler, but I encourage you to explore the single-request approaches mentioned above first!

[timofurrer]

Considering a setup where both endpoints are under your control and within your backend

Unfortunately, that's not the case.

[Telroshan]

Ok so in this case you'd have to rely on some custom client-side logic.
Now, I mentioned a dirty trick, here it is for fun (you can play it on this JSFiddle):

<a href="/whatever" hx-post="/test" hx-on:htmx-after-request="this.removeAttribute('hx-post');htmx.process(this);this.click()">Click me and check your Network tab</a>

To explain what's going on here:

• hx-post will intercept the click event, preventing the default behavior
• hx-on:htmx-after-request will be invoked when the request is completed (note: you could add an if in there in case you wanted to require the POST request to be successful before moving on)
• Its inline handler will remove the hx-post from the link, call htmx.process so that htmx properly unregisters its own listeners from the link (thus not intercepting & preventing the link's default behavior anymore), then trigger a click on the link with this.click to finally do the link's native action

To be clear, I wouldn't recommend this setup to anyone, especially as it doesn't handle Ctrl+clicks gracefully, nor does it handle right click -> open in new tab, but that's an idea still 😆
You'd very likely be better off writing a custom JS click listener on that link!

[brianmario]

Similar to this, I'd like to have a link tag's href value set, but have hx-post use that value instead of having to duplicate the URL in that attribute as well. I'd like it to be a link because of other browser-native things that link tags provide. So far as I can tell, there isn't a way to do this, but I imagine it would be akin to the this special value of hx-target.

Does anyone know if this is a thing? Did I miss some documentation somewhere?