ah, good to know!

ah, blur doesn't bubble

if you are putting it on a parent element, focusout might be what you want

my text input is being created by a javascript function. is this why htmx might not be picking it up/

is the htmx attribute in the dynamically created content?

If so, you need to call https://htmx.org/api/#process on the new content to turn on htmx behaviors

yes the htmx attribute is in there dynamically created content. i'll look in to process! thank you!

worked beautifully. i was stuck on this for awhile

Any suggestions on how I can close a bootstrap modal upon loading in a HttpResponse via htmx. I am submitting a form in the modal and so I can't just add data-bs-dismiss="modal" to the 'submit' button, as this will close the modal even if there are form errors (and the form wasn't successfuly submitted). I don't know any javascript whatsoever (😭) and need to do something I think would be so simple; close a bootstrap modal by somehow invoking data-bs-dismiss="modal" upon htmx http response..... I really, really should get around to learning alpine.js, but I have been surviving on bootstrap to do most of this for me.

Just set the

HX-Refresh

header in your server response to

'true'

– quick and easy. Sounds like you're using Django; so:

python
return HttpResponse('this computes', headers={'HX-Refresh': 'true'})

Another possible option is maybe return an empty div in your response which will wipe out the modal? If the form has errors return the form again with error message but wipe out the whole thing on success? Or add ‘hidden’ to the modal in your response.

Hi HTMX-world! I have a quick question. Is it possible to have an

<option>

within an HTMX-enabled

<select>

ignore HTMX function? As a matter of example, I have a

<select>

with a list of options, most of which should trigger the

hx-post

, but a final option of "Add another option" which should trigger some local behavior to display UX for creating a new option. That last option shouldn't

hx-post

anything, but putting

hx-post

on the

select

seems to be an all-or-nothing directive.

@User is there a response cache on HTMX? would it be possible to implement using the extension system?

You can try filtering the event so it doesn't work with your last option

hx-trigger="change[target.value !== 'last-option-value']"

Oooh that's clever!

Thank you @User !

I have a few screens that show empty forms that could be cached on the client side for a relatively long time and produce instant feedback to the user. Another thing is that there are a few screens that could show "stale" data while the cache is reloading in the background. The "stale while revalidate" approach.

just the normal https caching, but this could probably be improved on w/ an extension

excellent suggestion!

Is there a way to update an attribute on a parent element with a response? I’ve been playing with Daisy UI and like its themes. They suggest some JS lib that uses

localstorage

but I’ve been hearing that all the cool kids keep their state on the server, so I want to htmx their theme choice to the backend but then update an attribute on

body

(or the

html

element if possible) with the response so that the colours update.

It's kinda off-topic, but it's somewhat hx related.. I came from a vuejs world, where every tiny block of html tends to become a custom component/tag, but I'm a python guy that simply can't handle the js messy sintaxes.. The simplicity of hx made me fall in love and want to ditch that language from hell.. Conning back to server side development I just discovered that I can't write huge blocks of html anymore (I can only think in terms of tiny blocks of custom tags).. So here comes the question: is there any lib to write html on server side in a way similar to the way we write on the js views libs (vue, react etc)? 🤔

What are you using for templates?

Jinja

I think jinja macros are the closest thing.

Or have a look at this: https://github.com/mikeckennedy/jinja_partials

I would trigger an event w/

HX-Trigger

and listen for it on the body, passing in the class you want swapped on.

and I would use hyperscript 😑

Thanks! I'll take a look