I meant in these cases which explicitly mention swapping

Yes, gotcha. So, extensions have the ability to override how a swap is handled. That's what these two do when they call out to other client-side template engines. If you wanted, it would be pretty easy to make some other extension that modifies or transforms the incoming html in some other way (a dumb example might be filtering out bad words or credit card numbers, but that also seems best to do on the server).

Honestly, I haven't personally had much use for this part of the extension mechanism, but it's still pretty cool that it's there. Are you considering some other kind of client-side filter for your work, @powerful-train-54786 ?

No I was just trying to understand what they offered, I think I get it. So it's essentially just middleware using the html from the server and perhaps whatever the target html is as input before it hits the browser?

Yes. Exactly 🙂 Middleware is a great way to describe it.

Cool, I'll look deeper into those at some point if I get curious. Thanks for the clarification

I'm trying to create something like this: https://htmx.org/examples/active-search/ But I can't get it to work because no parameters are send in the ajax request. It's a simple input in a simple form. What could cause this? I'm not using hx-params.

I would prefer hx-get with just the value of the current input as query parameter, but that also doesn't work

nevermind, I had an id on the input but I forgot a name. stupid mistake

Can anyone recommend any libraries for creating tooltips? I like using HTMX+Tachyons, and I'd like to be able to just add a "title" attribute to an element, then add some sort of "data-tooltip" attribute too to turn it in to a tooltip (something that's faster to show up than the default browser tooltips). I've been searching for tooltip libraries, but the only good ones I can find are based on jQuery, and I'd prefer something more lightweight if possible. Just something simple but reliable really. Is there anything like this out there? I thought I'd ask here as I'd like something that's in-keeping with the HTMX approach to web dev.

I've always used Tippy.js, would like to know if there is something better

I use tippy and alpine

CSS @famous-monitor-57000 @hundreds-camera-24900

css
.thing { position: relative; }
.thing .tooltip { transition: opacity 1s; opacity: 0;  position: absolute; z-index: 2; }
.thing:hover .tooltip { transition: opacity 1s; opacity: 1; }

html
<div class="thing">
    Something
    <div class="tooltip">Tooltip</div>
</div>

Could probably be even simpler than that but it should get ya goin.

the second

transition

is redundant

@sparse-musician-64201 @hundreds-camera-24900 @refined-waiter-90422 Thank you

I have a form in a modal that I POST via HTMX (I also have Alpine available) and I'd like one of two things to happen: 1: Handle the JSON returned with the error code, that tells what fields are filled out wrong - by triggering a javascript function 2: The modal should close, by triggering a javascript function I've found htmx:onloaderror in the manual, but are unsure if that is the way to go and also I have yet to find examples of it being used, that gives me that "AHA!" moment

I'm completly new to both HTMX (and Alpine for that matter), so any pointers would be greatly appreciated 🙂

Ideally, you'd be returning the HTML for the form with the field errors in it and then replacing what you have. If you can't return HTML, then you might want to look into using client-side templates to process the JSON response: https://htmx.org/extensions/client-side-templates/

@bland-coat-6833 Ok, what If I just want to trigger a normal JS function on success? Is that possible?

You can use the

HX-trigger

response header: https://htmx.org/headers/hx-trigger/

Hi all - wondering if there is a better or cleaner way to handle client-side form validation scenarios - in this case, if the request was triggered by a form, check if the form is valid (already using the jQuery Validation Plugin) and if not, abort the request.

document.body.addEventListener("htmx:beforeRequest", function (evt) {
  if (evt.detail.elt instanceof HTMLFormElement) {
    const $form = $(evt.detail.elt);
    if (!$form.valid()) {
        evt.preventDefault();
    }
  }
});

This looks pretty good to me. HTML makes it tough to attach event handlers directly to elements. If you're already using hyperscript, you could say something like: `

Not using hyperscript (yet) but that looks nice and clean. Thanks!

I've been using

hx-preserve

successfully, but while it's not supposed to be inherited (per docs) I've noticed that when it's set on a parent element none of the elements contained under that parent element are replaced.

What does "not inherited" mean in this case? I could just be misinterpreting it

Thanks for the recommendations on Tippy.js for the tooltips library. It's what I was looking for. Just a quick question: The tooltips are working fine if they're there when the page loads. But if I add tooltips to some content, then load that in to the page using HTMX, the tooltips will not work. I'm guessing the way Tippy.js works is that it calculates all the tooltips on the page once when it first loads, but then it will not calculate the tooltips for new content that gets loaded in by HTMX. Is there any way to make HTMX "reload" the Tippy.js library to set up the new tooltips every time new content gets loaded on to the page?

Yes...

I'm not familiar with the tippy library, there's probably some kind of tippy.init() function that gets called to replace DOM nodes with its own content. This needs to run whenever you push new data into the DOM.

You could do it directly in your content by adding a script tag like this:

<div id="tip">MyTippyStuff</div> 
<script>tippy.init('#tip'); // or whatever tippy needs</script>