Hi all, quick question - I'm doing some pagination at the bottom of an injected partial, and I'd like to scroll back to the top of the target when it's been swapped - how can I accomplish this exactly?

Anyone have tips on naming conventions for templates? Particularly, templated responses to HX-Request headers vs non HX?

You can use hyperscript to scroll to a target on an event. Here's a simple button click event that scrolls back to the top of the container. https://codepen.io/bbennett/pen/eYVXode?editors=1111

Instead of a click, you could listen for

htmx:afterSwap

to have it scroll once the swap is finished.

Ah perfect, thank you

In my instance, I'm just using it for a small part of the site, so I just have the partials in a specific directory and don't name them any differently than I normally would.

Not sure why 'smoothly' isn't working in that example...

https://htmx.org/attributes/hx-swap/

show:top

are you using safari?

Oh awesome, thank you 🙂

No, in Vivaldi (Chromium based)

Microsoft officially no longer supports IE11 https://docs.microsoft.com/en-us/lifecycle/products/internet-explorer-11

The standard extensions (specifically,

json-enc

are in the CDN distribution, right? For some reason, I can't get the extension to work unless I make a local copy.

They are not included with htmx, you need to reference them in a script tag separately. CDN links can be found on extensions' documentation pages (e.g. https://htmx.org/extensions/json-enc/)

html
<script src="https://unpkg.com/htmx.org/dist/ext/json-enc.js"></script>

I don't know why I thought they were included...because then they'd be core and not extensions. 😑

I like to name my templates by the class I would give them in the BEM CSS model. Like

cpnt-recipe__food-item.tmpl

would tell you this is a food item inside a recipe component. RE the header, do you mean full pages vs fragments? The above would be a fragment

Has anyone considered adding support for local storage in htmlx, or is there a library that already does something similar?

Htmx does use local storage for some internal mechanisms, but no, there is no such feature for users

It should be really easy to just hook into htmx events with vanilla JS or _hyperscript and access local storage within your handlers

Could you elaborate on your vision of this feature?

Is there a way to programmatically turn off

every 2s

polling for an element? I have a grid that refreshes itself every 2 seconds, and I want to allow the user to drag and drop contents to rearrange them. The moment they start dragging, I want to block refreshing (including ignoring any inflight-refreshes)

Hmm, I see I can do

every 1s [someConditional]

but I don't know what

someConditional

is. Just a JavaScript expression that should evaluate to

true

?

ok please can you confirm for me that this does/doesn't work because I'm trying to use it in vain.

Yes it’s a javascript expression

Hey y'all. I just wanted to make a plug here for using Hyperscript with HTMX. I was using Alpine before because it seems to have a bit more momentum and because 1cg is always on podcasts characterizing Hyperscript as only for the very brave of heart 😉 . I'm here to tell you that once you get over the unusual syntax, it's an absolute dream to work with alongside HTMX. Alpine has trouble maintaining client-side state when you start swapping out chunks of DOM with HTMX – so you need to add a plug-in and extra plug-in related attributes cluttering up your markup. Hyperscript doesn't have that problem at all. It's a pretty different approach to inline, element-level scripting. And it works wonderfully. So that's my plug. If you're put off by Hyperscript for the same reasons I was, I highly recommend giving it a second look for your HTMX projects.

1cg is always on podcasts characterizing Hyperscript as only for the very brave of heart

he should tone that part of his pitch down, imo lol.

@mysterious-toddler-20573 when does the condition get checked? When doing the swap, or when submitting the request? E.g., if the condition becomes false with a request in flight, what will happen?

New devs not having to learn how async works when using hyperscript in of itself, is pure gold.

Also makes thinking with events so intuitive.