So adding hx-swap="innerHTML scroll:top" should fix it. Thanks 🙏🏼

👍

About PostgREST: The umbrella term is "Backend for frontend" (like GraphQL). HTMX is different. HTMX brings HTML to the frontend. Creating the HTML is the job of the backend. How you do this in the backend (with PostgREST/GraphQL or direct SQL) is up to you and not related to htmx. Does this answer your question?

I understand the intent - if PostgREST generated HTML directly then that would be great. To avoid additional server/intermediate components an HTMX extension could perform this itself. I’ve done this for specific cases and the simplicity it provides is excellent.

postgREST is basically a wrapper around your database that automatically creates a JSON REST API

Perhaps I’m saying this poorly. Firstly, I’ve done this in limited contexts and a JSON/HTML conversion done in an HTMX extension allowed direct usage of PostgREST that worked well. This is just a report that this combination of tech along with HTMX was a pleasure to work with. Second, agreed that this is out-of-scope as a core HTMX concern. But as an extension it is simpler to test/implement/iterate than on modifying the backend.

Well that's awesome if you got a working concept. Personally I feel that its kinda like using a screwdriver to hammer a nail, but hey i might be very wrong. If it is working for you, why not keep going. Joy of development is key 🙂

I tried both PostgREST and PostGraphile a while back... and they are damn cool projects. However my biggest takeaway was my underestimation of Postgres in general. It's really amazing how you can do authentication and even run languages beside SQL in the database itself.

Two years ago I thought GraphQL will be the future. But my mind changed. GraphQL and other Backend-for-frontend tools are not the tools I want to work with. I prefer to create html with Python+Django+PostgreSQL. But that's only my personal opinion.

@User do you know when the djangocon EU videos are uploaded? Would love to see your talk

I asked the organizers of the event. I will post here and on my twitter account if the video is available.

I'm trying to implement the example from here: https://htmx.org/attributes/hx-ws/ I've already managed to add new messages to the

#chat_room

div. Any idea on how to clear the input box too? If I replace the input box it looses focus, it would be nice to be able to post several messages in a row without having to click the box again...

Does the input have a unique id attribute?

Have to share another success story. I spent the past 24 or so hours (with a bit of sleep in there) refactoring one of my most complex views (for a complex utilities company operations management project). It involved queries and calculations for a set of objects (so each query & calculation was performed for each object represented on the page), multiple datatables, and charts, all placed under tabs for each of the objects. It required some complex looping to build out separate tabs and tables for everything. With HTMX I now load a single tab's worth of content. No more looping and complex naming schemes for multiple tabs and datatables and forms. And the initial page load is probably 10 times faster. SO. MUCH. BETTER. I now have 2 (MUCH shorter) Django views, and 2 (again, much shorter/simpler) templates to replace one embarrassingly long Django view and an out-of-control template. 😍 Things seem so much more manageable than they have in some time.

👏 fanstastic

Yeah, I added

id="chat_message"

to it

That typically works for me, but I don't use websockets. Maybe it's an issue specific to those?

So how would you actually empty the existing

input

using HTMX? I'm not clear if that is actually supported...

I tried to set the inner HTML but I only get a strange string error in the console

Sounds like you want a mix of front end and back end code here. To empty an input using pure htmx, you would replace it, but if you want to do it client side, I would use something like alpine, hyperscript or vanillajs

let me look at the code around focusing, one sec

Can you share some rough code here for us to look at?

This is the initial HTML

<div hx-ws="connect:/chatroom">
  <div id="chat_room"></div>
  <form hx-ws="send">
      <input id="chat_message" type="text" name="chat_message">
  </form>
</div>

And this is the response on the websocket:

<input id="chat_message" hx-swap-oob="innerHTML">
<div id="chat_room" hx-swap-oob="beforeend">
    <div>
        <span class="user">{{user}}</span>
        <span class="message">{{message}}</span>
    </div>
</div>

The first

<input...>

there does nothing

With hyperscript, this works fine (but I'd rather avoid the dependency!):

<form hx-ws="send" _="on submit put '' into #chat_message.value">
      <input id="chat_message" type="text" name="chat_message">
  </form>

The problem is

.value

is a bit special since it's not really an HTML element? There's a shadow element in the DOM for the value, but I don't know how to modify it

Have you tried using hx-swap-oob="outerHTML" for the input?

@User If I do that, the whole input is replaced and it looses focus. That's what I wanted to avoid

I replace entire forms which don't lose focus when the inputs have id attributes, but I am not using ws or OOB. That's why I am not sure if this is an issue specific to ws. Could also be OOB related. The other thing you could try is to remove the hx-swap-oob attribute from the input so it gets naturally swapped into the form and leave the oob for the chat room div.