working

can you render these fragments directly as top level elements?

I can ask around and see if I can find out. Never used it that way, but I'm sure it's possible.

👍

is the following possible:

Click on on something in page fragment, start fading out the current content while simultaneously starting an hx-get to fetch the replacement, then hold onto the replacement response until the fadeout completes, and fade in the new content? Locally, you can do this with JS by chaining on

transitionend

but I am really curious if I can duplicate this kind of feature in pure htmx.

lemme see if I can do that

I don't think so, but maybe

are you willing to use hyperscript?

sorry, i can't use hyperscript for this project

ok

looking at the code, I don't think this will work

however, I can help you hack the source if you really want this

thanks for the offer, but it's not a big deal to do it locally in JS... it was more of a "hey, let me make sure i'm not overlooking some easier htmx way to do this..."

@mysterious-toddler-20573 Real world, personal experience question for you: When using htmx on projects, how often do you find yourself breaking out the htmx paradigm and using a local JS solution for part of your page, for UX reasons (eg, because you want some effect like the animation I mentioned, or because a page fragment reload would be too heavy, or some other reason). I've heard you say you're very much a pragmatist and so aren't against such things, but I am curious how often you find yourself actually doing them?

Depends on the type of project or the feature. The more cruddy and poke-state-into-a-server, the less I bail from htmx.

When I'm working on online tools that mutate the local DOM, I'll use hyperscript

For something like a CRM I'd be mostly htmx

so, it might not be satisfying, but It Depends ™️

when I do bail from htmx, I try to keep it pure front end stuff. If I need to sync w/ a server, I try to keep that a hypermedia exchange. But I'm not going to kill myself doing that.

Related question... Is there a mechanism like

hx-get-local

, which would simply "get" some local piece of (probably

display:none

) html and swap that in? I'm thinking of places where you want 0-latency and have small bits of static html but still want to stay within the htmx paradigm....

For individual attributes, you are probably better off with JS/_hs

For fragments though, having

hx-get="fragment:#template"

that would retrieve data from a template tag could be an interesting idea of an extension

Yes, this is what I had in mind.

hello everyone, i just joined the discord - look forward to learning a lot more about HTMX and being part of the community 👋 i'm following along with the examples on the website: https://htmx.org/examples/modal-bootstrap/ > We're replacing the standard Bootstrap Javascript library with a little bit of Javascript, which triggers Bootstrap's smooth animations. could someone please explain how to perform this replace step with the

closeModal

function so that i can get the example to work? i'm using django, if that matters. thank you!

Trying to think if there's a good way in the frameworks with which I'm most familiar. Wondering if there's a way to do it with just straight HTML as well; rather than a wrapping structure like

#fragment

, you could pass this library just an ID, and it would pull it out and send just it.

🤔

I had a problem and though, "Hey, I'll use Java!" Now I have an

AbstractProblemFactoryHelperImpl

...

what do you guys make htmx-clickable elements? s, s, or something else? - : these don't get styled as links if href is not set, so can either set href=# or fix up the styling in CSS (add cursor: pointer, etc). - is semantically better, but then i have to strip off all its terrible default styling and make it like a link. (also, those who use buttons, do you set type=button, or just leave it?) - some other element, such as or : have to style these to look interactive (similarly to without href), but maybe that's not the worst? just wondering what you guys' approach is. (i'm using bootstrap, in case that's relevant, but interested in approaches generally.)

I'll typically render the

href

and use

hx-boost

(usually way up near the top of the DOM) to make things work. I've also used links styled with

btn

classes, rendering the

href

in addition to

hx-delete

(or whatever it's actually doing). That way, the application should still work as a plain MPA even if htmx doesn't load for some reason.