Hi, does there exists a hx-err built-in extension?

It's hard to follow it there. In particular I see there PR's with comma separated events

querySelectorAll("hx-foo, hx-bar")

. Why isn't it a solution? Maybe there's some king of RFC I can read?

#1079191774976802867 .

so as to not confuse new folks, can I ask that we mostly discuss speculative stuff in #1079191774976802867?

Do you guys know wether the head-support extension also evaluates inline script elements? Currently on a walk and cannot test. Bugs me. 🙂

Code looks like it collects elements by outerHTML. So adding an ID should work.

Hi, I have the following form

<form id="basket-wrapper"
      method="post"
      hx-target="#basket-wrapper"
      hx-post=""
      hx-ext="morphdom-swap"
      hx-swap="morphdom">
    <div hx-trigger="change from:find input" hx-post="">
        <input type="text" name="billing_first_name" id="billing_first_name_id" value="">
    </div>
    ...another inputs

    <button hx-swap="morphdom show:.field-error:bottom"
            type="submit"
            name="next"
            value="1">
        Proceed to summary
    </button>
</form>

So, when you blur from the input it is send to server for validation and when you click on button submit is triggered and form is also send to server. When you click on button there is also button data

{next: 1, billing_first_name: 'something'}

I am trying to achieve that if you click on button, you are scrolled to first error, but not when you jus change input. Is it possible somehow "override" swap behaviour based on trigger element ? When I change button it in this way

<button hx-swap="morphdom show:window:top"
        hx-trigger="click"
        hx-target="#basket-wrapper"
        hx-post=""
        type="button"
        name="next"
        value="1">
    Proceed to summary
</button>

scroll is working but value next=1 is not presented in request.

Instead of value use hx-vals=‘{“value”: “1”}’

Or rather name: 1

Which Golang template engines support inline fragments?

stdlib html/template?

Or at least it is a smaller building block, but you can totally achieve having subtemplates/fragments renderable on their own

Does htmx perform some kind of "gc" on elements that are about to be swapped away in favor of new content with e.g.

innerHTML

? If so, is there currently a way to handle that circumstance with events? I couldn't find anything in code related to this.

@orange-umbrella-16693 yeah, go has GC so its a moot issue. @some-airline-73512 I find gomponents works better for htmx partials than any templating i've used

Oh I was not referring to Go but the HTMX library

Like if a processed element that has

hx-get="/something"

gets removed from the DOM, does the event listener and related data gets "GC’d" (as in neatly deinitialized and event listener removed) by the library or does nothing really happen?

This is crucial for my usecase if I want to overwrite elements that have

hx-ext="ws"

for example

Will the websocket connection stay and start spouting errors or will it be nicely killed off?

It should be closed properly

In modern browsers, when you remove an element from the dom (by swapping it), any attached event listeners are released for garbage collection too. However, if you make any references to an element (e.g. via

document.querySelector()

) that you haven't subsequently nulled, then the element and it's event listeners will hang around using memory even after it is removed from the DOM. So generally it's a good idea to cleanup after yourself, IF you do attach any custom javascript behaviour to a dom element that is likely to be swapped out. Htmx doesn't do anything else by default other than handle it's own event listeners and internal state, afaik.

really nice video by @gifted-appointment-5037 (great avi) on htmx v. angular implementations of the angular demo app

one interesting aspect is how much snappier the htmx version is, very nice to see!

> You might be able to see that the speed that loaded was significantly different

Hello guys, I have an event handler working in one django project but not in another and I can't find what's wrong. Here is how its laid out. The server sets up a message using Django's built in messages framework. These messages are intercepted by a middleware and put into response.headers['HX-Trigger']. And these are reaching my client-side perfectly. And on the client page there is a script, toasts.js, containing this:

htmx.on("messages", (event) => {
        console.log("message received");
        event.detail.value.forEach(createToast);
    })

And this script should create a toast and show it on the page. This setup is working fine on another project. I have verified that toasts.js is being loaded, and that reponse headers are reaching the client, but htmx.on() is not firing for some reason. Any ideas what I should check?

Are there any errors in the console at all? You can also enter

htmx.logAll()

in the console to enable verbose events logging and check if there is anything out of order

Hey hey everyone! I hope y’all are doing well. I was wondering if I could connect with someone who is familiar with using HTMX along with MongoDB, mongoose/express. I’m building a simple CRUD app but I’m running into an issue where the update and delete routes aren’t working out…I’m essentially new to backend development so I’m needing just a little bit of guidance. If someone would like to help, I’d like to connect and message you. Thanks!

No errors in the console. I ll try out logAll() after I come back to it in a short while, but here is the headers received by my client:

HX-Trigger: {"accounts:changed": true, "messages": [{"message": "Company user updated", "tags": "success"}]}

And if I attach an htmx.on to accounts:changed it works! So I am not sure why the message handler is not being fired.

I just did this and it works with the other header trigger as I mentioned:

htmx.on("accounts:changed", (event) =>{console.log("I caught it!")})

If I'm not misunderstanding your question, I think this is the relevant bit of code that you're looking for: https://github.com/bigskysoftware/htmx/blob/09565cde1bad12b28a552a998391b63fd7194a6e/src/htmx.js#L863

Yep, looks like what I was asking about. Thanks.