but you have my thoughts and prayers

🙏

I have a page with a table with rows. Each row has a button to show more info in an off-canvas and there is a filter select at the top of the table. Both the filter and the buttons are powered by htmx. I now want to add error and timeout handling for both. I am wondering what the best way is (or if it does not matter). I could do

document.addEventListener(...)

and somehow use something from the event to know if it is a request coming from the filter or for the off-canvas (because the way I will display errors is different). Or is it better to add the event listener to each of the action buttons of the table rows, and to the filter select all separately. So I already know what request is failing? I am just wondering if adding many event listeners would have a negative impact on performance?

Is it possible to define 2 triggers on an element (a

<tr>

in my case) where each trigger does a different request and also does a different swap? My use case is combining an infinite scroll (so trigger

intersection once

with swap

afterend

) with polling to update a row itself (so trigger

every 1 s

with swap

outerHTML

).

Is there a recommended way to build components for htmx? Or libraries one can use?

Yes, the elements have ID, so the

preserve

works great from that aspect, but the element (if a marked with preserve) just loses focus. Quite frustrating for users, but also makes it difficult to use

preserve

if it's updating while a user might be updating a text input field.

has anyone had issues with the halt in hyperscript not stopping events bubbling? I have an input element that I want the keyup Enter to click an adjacent button and not submit the form but happy for any other input field to submit on enter being pressed

that's where we stop bubbling

depending on what you mean, normal web components should work OK w/ htmx. Or, if you are asking how to structure your server side code, it's going to depend on what your server side gives you.

typically I would recommend two different elements for the two behaviors (potentially one element with no impace on the layout, such as a div wrapped around another div)

Thanks - is it not possible to stop this behaviour or do I have the syntax wrong? I've tried halt bubble and default and just halt but the form is always submitted. Pretty sure I've had it working with preventDefault in js before.

are you able to use the uncompressed version of hyperscript and set a break point?

which event are you halting?

Thanks, I'll try the uncompressed version. It's keyup == "Enter" on an input field. I can log the event and halt an alert with hyperscript but the input type="submit" is always triggered. I have _="on htmx:beforeSend set #submitButton.disabled to 'disabled'" on the form which I'll try removing

ah, you are going to have to cancel the "submit" event on the form

those are going to be separate unfortunately

i believe

or maybe the "keydown" event?

I've changed the type to button instead of submit and wired that up to a submit on the click for now.

today I heard a new one: "HTMX is a technology trying to do too much". I'm trying to engage with the user to understand where is he coming from. I wonder if he is mixing htmx with hyperscript.

lol

"htmx isn't focused enough"

"htmx is too hard to install"

lmao

I like how people immediately assume htmx is supposed to replace [technology].

a bunch of html attributes to avoid writting js vs webpack + a whole bunch of js libraries and transitive deps

to be fair with abito you don't have to renounce to anything to use htmx, but man there is a beauty about leaving behind a lot of the modern stack complexity and rely more on backend and hypermedia