this is kind of a corner case

I get the full page into the body now (including meta tags and so on) trying with hx-select

try

hx-select='body'

🙂

we'll get there

Here's the deal

hx-select="body" breaks, the body tag is empty

with "normal" parsing, the body tag is ignored, you just get the content within it, so you can't swap the body tag itself out (to add classes)

the "normal" parsing also ignores the head and all that junk

so i use a div inside the body and be done with it? 😄

so, unless you are changing classes on the body, it "just works"

you know, that'd be easiest ngl

ah

there can also be performance issues when re-rendering the body tag I think

thank you for the quick response and help

I assume the preload extension doesn't work with hx-boost?

(btw using an inner div works like a charm for the above problem)

is it possible to completely disable .scrollIntoView (without triggering an uncaught exception) with hx-boost?

Yes, you can override it w/

hx-swap="innerHTML show:none"

looking at the source, I don't see why it wouldn't, although @User I think I see an error on the last line of code, looks like

[data-hx-get

isn't closed properly

Yes and yes. It should work with hx-boost. We’re just looking at the properties in the element and issuing a fetch when someone hovers (or mouse downs) an anchor. This should be compatible with hx-boost.

And yes, the data-hx-get is not closed properly. Fixing and posting a patch now 😞

I like to clear an input field using JavaScript. I have it working like this:

htmx.on("htmx:afterRequest", function(evt) {
        let input = document.getElementById('new-todo-input');
        if( input === evt.detail.elt) {
            evt.detail.elt.value = '';
        }
    });

But I wonder if there is a way to bind to the

htmx:afterRequest

event of the

new-todo-input

element directly to avoid the

if

statement in the function?

Is there a way to listen to 2 different events? I have a

<span>

that shows the number of todo items and it should trigger a new GET request to update when an item is added or when an item is removed. I tried this:

<span th:fragment="active-items-count"
      class="todo-count"
      hx-get="/htmx-events/active-items-count"
      hx-trigger="itemAdded itemDeleted from:body">
            <strong th:text="${numberOfActiveItems}">0</strong> item(s) left
        </span>

But that does not work. I can get it to work for

itemAdded

only, or for

itemDeleted

only if only add one of the 2 in

hx-trigger

. Is there a way to make it work, or should I file a feature request on GitHub?

Should have looked closer at the docs, this is how to do it:

htmx.on('#new-todo-input', 'htmx:afterRequest', function (evt) {
        evt.detail.elt.value = '';
    });

I found a sort of workaround for this, but it is quite ugly: 1) Use

hx-trigger="itemAdded from:body"

on the HTML 2) Add this JavaScript:

document.body.addEventListener('itemDeleted', function (evt) {
        let el = document.getElementById('active-items-count');
        htmx.trigger(el, 'itemAdded');
    });

So basically, take the

itemDeleted

event (that arrives via

HX-Trigger

header from the server) and send an

itemAdded

event on the element to trigger the

hx-get

that updates the span. I am open for better suggestions 🙂

in the docs, it says that you can use a comma separated list of events so instead of hx-trigger="itemAdded itemDeleted from:body" write hx-trigger="itemAdded, itemDeleted from:body"

Where in the docs did you see that?