<div class="far fa-angle-up text-center fa-lg" hx-post="/hx_country_date_selection/" hx-trigger="intersect once " hx-swap="outerHTML swap:1s show:#generated_id_{{generated_text_list.0.id}}" hx-vals='js:{"country": getCountry(), "year_to_check": {{ start_year|date:"Y" }}, "requested_direction": "before" }'>

I want to extract cookies values and use these values as parameters in websocket url. Is it enough information? Thanks for your ideas and sorry if I my questions isnt very clear - I am quite begginer especially with htmx.

Could you not connect to a generic URL and then read the cookie value on the server and act accordingly?

Depending on where you want to use those values, it is possible to add event listeners to htmx websockets event, read cookies with JS and modify your message. It also should be possible to read cookies from

hx-vals="js:

attribute. https://htmx.org/extensions/web-sockets/#htmx:wsConfigSend https://htmx.org/attributes/hx-vals/

+1 to this. Obviously your requirements may differ, but in my experience you'll get the most mileage out of HTMX if you construct your server to expect the data that in the format that browsers generate by default (cookies in the header is one example,

xxx-www-form-urlecoded

instead of JSON forms is another). HTMX provides affordances like

hx-vals

or events to accommodate more complex logic or less flexible systems, but the more you can use defaults the more you're letting other people's optimized systems do the work

I was attempting to see if I could update just the value of a text input's value attribute (instead of the whole input which is what I'm doing now) - I don't think it is possible but thought I'd ask chatGPT for an example and it offered up a new "hx-attrs" functionality.

Hello All! I'd like to ask you for advice as I have been trying for some time to implement htmx in a performant way, and I am sure it is possible, but I have not been able to figure it out so far. I have a django web application, where I render a page: main.html. This main.html includes some files from: file1.html, file2.html,... file100.html. In main.html, I am using Django templating to dynamically include some of the fileX.html files based on a django context variable include_list. (e.g. include_list = ['mypath/file3.html', 'mypath/file24.html', 'mypath/file44.html']) All these file1.html, ..., file100.html files include several html tables where all td values are django context variables. https://codepen.io/parrot12080/pen/QWVgxaE I'd like to update all td values inside the fileX.html files and render main.html. I have a django view that returns all the context variables from a database and passes them to the template. What is the best way to update all td values with a request , using htmx the most performant way? So far, I created a swap_in_main.html (with hx-swap-oob="true") , but I believe this is not the right way to do it as the method is quite slow and it replaces all html content, not just the values inside the tags.

The fastest way is to rerender the entire table and replace it in one swoop

That said, is there a way to get the htmx response using hyperscript? I've simplified it a bit here, but looking to update an input's value after a back end call which suggests boilerplate for the user to start with based on a number of factors (region/language/product use etc). Up to now I've been replacing the whole of the input control, but looking to stop that as I need to deal with some id's which I'd rather not have to be passing around just to be able to rebuild the field properly. I've looked at doing the following which puts the suggested value in a div, then using Hyperscript puts the inner text into the value. It has me wondering if there is a way to get the htmx response directly without having to go through the intermediary div.

right now htmx doesn't make it easy to target attributes, but it is easy to do w/ hyperscript

(I'm using the value property rather than the value attribute, which I think is more stable)

ah, but you need to gather input values too...

lemme code something up

Thanks a lot for the quick answer! I observed that when "linked-to='xy'" were added to all tags (~1000 tags) in all fileX.html-s, the htmx request took almost 2x times to update the values in the tables, - checked the speed by inspect/Network tab in the browser. e.g."" was changed to "" Is there any reason for it, and anything I could do to get back the old speed but keep the linked-to in the code somehow?

I have asked AI and it generate absolutelly perfect complete code for me, with only one small problem: It does not work https://codepaste.xyz/posts/2jzDmVHDSGpLE7zlP9OB

I think the best way to treat AI generated code is like an answer on StackOverflow from someone with <50 reputation. But without the rest of the SO community to tell you that suggestion is terrible.

Or like that lone suggestion cause no one else knows or cares whatever the hell it is your asking about 😅

ChatGPT in particular will just make stuff up too. That’s it’s whole purpose. To make up words that seem right. It doesn’t care if they are right or not, but they seem plausible

Who cares about SO community opinion....

you are wrong

#974086000307499028 for fighting about AI

Web geniuses of #725789747212976259, can you help me with a problem I have when using https://shoelace.style (a web component library) and htmx, pleeeeease? There's full detail in this Github discussion - https://github.com/shoelace-style/shoelace/discussions/866 - but the summary is: I get this error

htmx.js:1845 TypeError: Cannot read properties of null (reading 'focus')

because the component isn't loaded before htmx tries to set the focus. The Shoelace developer suggested using

await customElements.whenDefined('sl-button')

. I've managed to avoid async stuff thus far so I'm a bit out of my depth. This was my attempt (which didn't work).

html
    document.body.addEventListener('htmx:beforeSwap', async function removePlaceholder(evt) {
        const undefinedElements = evt.detail.target.querySelectorAll(":not(:defined)")
        console.log(undefinedElements)
        const promises = [...undefinedElements].map((el) =>
          customElements.whenDefined(el.localName)
        );
      
        // Wait for all the children to be upgraded
        await Promise.all(promises);
    })

Hey all, is tailwind popular in the htmx community and commonly used?

Why do you ask?

While I don't know whether it's popular here, I do see a natural synergy with the concept of htmx in the first place as both aim to be utility-focused.

How can I gracefully handle a swapError event? I tried this code, and the first console.log (about adding the listener) works, but the second console.log doesn't happen.

javascript
console.log("About to add a listener for htmx:swapError...")
document.body.addEventListener('htmx:swapError', function(evt) {
  console.log(evt)
})

I see this in the logs instead

About to add a listener for htmx:swapError...
htmx.js:1875 htmx:swapError

Out of interest, because htmx users like utility first in the UI layer and dislike compilers, but I also saw a lot of htmx users use tailwind, which has something that can be called compiler, I just find it interesting because if libraries like htmx or alpinejs would be open to a small simple compiler they would never have to be worried again about CSP.

You may use a compiler in the development process, but for me, htmx is about

"put a <script> link to htmx.js into your HTML and go"

, without having to touch any existing build- or development infrastructure