It gives you inline scripting, which plays well w htmx

Alpine is better supported than many of the other small ones

so I normally go for that

Guys, i'm using hx-post and data that my backend (Django view) is receiving is None any ideas what could be wrong? <input class="form-control form-control-sm" type="text" name="msr_target" hx-post="{% url 'endpoints:msr_ipaddress_check' %}" hx-trigger="keyup" hx-target="#ipaddress_error" hx-swap="outerhtml"> Payload: csrfmiddlewaretoken=GIHtX25cNgLFk1atH0N5gC5wwhtMJV4snIbwABkOhJdRrYrqfRzn0HYQDOsF7sOs&msr_target=1.1.1.1&msr_description=&msr_country_code=Select One i'm interested in: msr_target=1.1.1.1 request.POST.get("msr_target") returns None

What's the "rule" for making CSS transitions work with HTMX? I know the element has to have an id (that stays the same between the to-be-loaded-response and the current DOM), but does the element have to be a "top level" in the response? My response is something like this:

<div id="dashboard">
  [...]
  <div><div><div id="1">[...]</div></div></div>
</div>

It's not OOB. Should something like this honor the CSS transitions of #1? EDIT: ugh. My ids weren't unique 🙄 It's working now

That markup looks correct to me. The payload looks like a GET request but I assume that’s something to do with however you’ve printed it out to share here.

Are you sure that your

request.POST.get("msr_target")

code is in the same view associated with the url name

'endpoints:msr_ipaddress_check'

?

Hi, I've been trying to implement socket.io in my app with FastAPI and htmx but ended up writing a lot more JS than needed... (for the extension) Basically for each event etc Is there any better solution to this?

What are you trying to accomplish?

I'm implementing a chat application, with group chat capabilities. So I need to use rooms which are available in socket.io but not websocket... Now for each event I am creating a JS function to plug into htmx vs using hx-ws direcly. I was wondering if there's a better way to do this...like a common JS event for all incoming and another for outgoing socket events and call that into htmx?

Just spent 10 minutes staring at my

swap-oob

class wondering why it wasn't working... I think I'm tired...

oops

Object-oriented swapping - you might have invented the next big thing!

finally, a modern way to run web applications on a coffee machine

too much OOP in the brain!

@icy-vase-29164 did you find a good solution to this? The best solution I have found is that every single url loaded or pushed needs to be unique and have something like a meaningless timestamp on it so that after a tab comes back from sleep it renders that same html as the user viewed it prior to sleep and back navigations also render what user saw last rather than what user first loaded.

"90% of programming time is spent staring at code like an idiot"😅

Good clear essay, I expected much more trademark infringement tbh but otherwise good.

anyone got any good examples of form validation with htmx?

if you mean client-side, the answer I've got is to lean as heavily on HTML attributes as you can (

required

,

pattern

, etc) and clear label text that describes what form you expect the input to be provided in. I have so far avoided having to write a JS form validator, but HTMX doesn't give you a ton of help on that front

You can and probably should have your server-side validation errors return a descriptive toast of some sort with

swap-oob

if you are not caching the HTML responses from the backend using

Cache-Control

and friends, then you can just add an if/else branch in your backend handler that checks whether the request is from htmx or from just the browser loading a URL. if htmx then you serve a fragment, if the browser loading a URL then you serve the full page.

Yes it is 🙂

to be precise: @csrf_exempt def msr_ipaddress_check(request): if request.method == "POST": msr_target = request.POST.get("msr_target") print(f"Received: {request.POST}") return HttpResponse( f'IPv4: {msr_target} can be used!' )

May 23 20:14:32 pi-box-01 gunicorn[2455]: - - [23/May/2023:20:14:32 +0100] "POST /endpoints/msr_ipaddress_check/ HTTP/1.0" 200 56 "https:/> May 23 20:14:32 pi-box-01 gunicorn[2455]: Received:

Yes, already do the if/else branch on backend based on htmx vs full page load. The issue is that after a tab is discarded(chrome) and then you return to the tab, no request made back to server and the last fragment load of the url is what is rendered. Back navigation does not issue request to server either. I'm specifically having an issue with multi-step form where navigation from step 1 to step 2 is htmx. When put to sleep on step 2 without a unique url path the fragment only is rendered, and on back navigation(no server request) the original full page load step 1 page is rendered, not the step 1 that had been modified. It wasn't until recently we started seeing and noticing issues with tab sleeping/discards, but it's a new reality we need to handle. I tried the content type fix you suggested and it can definitely be used to identify htmx request on server side, but doesn't seem to help with reload issues. Also i have cache control set to no-cache explicitly.

gotcha. btw,

no-cache

doesn't mean 'don't cache', it means (roughly) 'cache but check with origin server'. for 'don't cache' you need

no-store

without knowing too much about your app, sounds like it needs different URLs for different steps in the form process. e.g.

/form/step/1

,

/form/step/2

, etc.

this makes sense from a hypermedia perspective because they can be modelled as different REST resources