So, in this case I would recommend thinking about exactly what "at rest" means

because it sounds like it means "input hasn't happened for a while, but also the form is visible"

if we can get a good definition of "at rest", then we can tell if htmx can achieve what you want.

If it can't, then the next best thing is to write some javascript that properly captures the notion of "at rest" that you want, and trigger an event on the form called, for example "atRest", and then have htmx triggered on "submit, atRest"

unfortunately it is late here and I'm off to bed, but hopefully that is helpful and I'll check in tomorrow AM to see if I can be of more assistance

That sounds like 'at rest'. Not at rest is: form values have changed, or submit button has been explicitly clicked.

Ok, sleep well, just tag me and I should notice 🙂 Thanks!

roger roger, good luck

sometimes some scripting is OK, if htmx isn't behaving the way you want!

Did you try “keyup changed delay:1s”? You didn’t mention keyup anywhere.. changed is a filter for keyup, which is the event

No, I didn't, so that might be why it didn't work.

A different issue I'm looking at, trying to work out how to use the confirm() function to trigger a request only when the confirm dialogue answer is yes. Does this look right? I'm getting some errors in the console that don't look helpful (using unminified htmx). Not sure if htmx.trigger does what I expect -- I'm expecting that the button's hx action will only trigger if I manually fire that trigger name myself:

html
<button id="adults_{{i}}_remove_button" name="adults_{{i}}_remove_button" tabindex="-1" onclick='if (confirm("Are you sure you want to remove this adult?")) { htmx.trigger("#adults_{{i}}_remove_button", "custom-trigger"); return true; } else { return false; };' type="submit" name="remove_adult" value="{{i}}" hx-vals='{"remove_adult": "{{i}}"}' hx-post="" hx-trigger="custom-trigger">x</button>

I did find a suggestion in the docs to use another 3rd party library for confirmations, but I was hoping to see if I could work out a way to use the browser's built in confirmation

These are the errors I get with this

Oh. If I get the onclick to return false every time, then it works. I think the problem is maybe that custom-trigger fires AND because my onclick function returns true, it does a normal submission too.

hello! I'm just starting out with HTMX. First of all thanks to everyone involved in it. Love how it works so far. Quick question regarding WS is there a way to pass

data

which triggered

ws-send

to payload? I'm trying to catch

keydown

and can only see

id

or

name

of the

div

which has

hx-trigger="keydown from:body" ws-send

. Thanks in advance.

You don’t need to use onclick for this. Use hx-confirm alone and a pop up will ask the user to confirm whether the request should proceed or not

I tried that, it had a prompt to fill in some value as well. It wasn’t just an ok/cancel form

Although, maybe I did it wrong. Will give it another shot actually.

@happy-knife-63802 Yeah that works perfect actually. It was probably hx-prompt I tried.

Cory LaViska of Shoelace got back to me https://github.com/shoelace-style/shoelace/discussions/866#discussioncomment-3447354. It's a bit out of my depth but it sounds like HTMX is wanting to set the focus on an element in the HTML response it receives, which contains Shoelace elements, but they're not ready to have their focus set when HTMX tries? Shoelace is using some variation of web components, so it would be good if HTMX had some allowance for it. Out of my depth though - I don't really understand where the fix should be (if at all).

our team decided to switch from webpacker to Vite - "next gen frontend tooling" ... (in a rails project). is there a way to require htmx correectly? vite doesn't support

require

this

import _htmx from "htmx.org"
const htmx = _htmx

results in

Uncaught TypeError: htmx.find is not a function

in this call

document.addEventListener('htmx:beforeRequest', () => {
  htmx.removeClass(htmx.find('#bouncing-loader'), 'hidden')
})

I'd personally just do

<script src...

but there are still fans of the bundle tools

Someone should figure out how to do this with htmx: https://twitter.com/charca/status/1561830946462384128?s=21&t=f29uqtHwnmRdnrPeWtdWvQ

I don't know what his DOM looks like, but that doesn't look very hard to reproduce with htmx

seems like an excellent opportunity for an extension

If you could do it and write a blog about it, I would be very grateful!