@mysterious-toddler-20573 @hundreds-cartoon-20446 Here is write up I did in markdown explaining how I would fix it with step by step code. Please view it in Vscode markdown preview. What do you think? I will also push changes to a fork so you can see a diff, but this is necessary i think to explain why. Including the code made it too long for me to post as a comment 😦

@mysterious-toddler-20573 @hundreds-cartoon-20446 Here is a branch with those changes if you are curious: https://github.com/michaelperel/htmx/tree/miperel/hx-location

@limited-potato-46306 thanks for putting that together, that really helps explain what you’re doing. I’ll do some testing.

@late-king-98305 i know u dont do java, but here's my attempt with the creative tim bootstrap5 template on java-spring if anything obvious still pops out...would love to get feedback this is a loom - https://www.loom.com/share/22cbb3057e4b4a6dbd0eb9eaa0b409c7 https://github.com/arakoodev/htmx-spring-creativetim

hi everybody

anybody ever tried to use thymeleaf-htmx to display a form in a pop up modal, back-end validation, then update the display ?

Im having some problem with my code

hey, if I have an input that I want the value to be preserved, but the rest of the html to be swapped, what can I do?

In my case I want the class to still be swapped

htmx supports this, or I need to use some hyperscript and javascript to do that?

I’d return the html with the input included (with the input value set in the html response)

this is what I was doing, but it give problems when the server takes times to give the response, like text being replaced and focus removing, yet, it seems the best solution so far

I think I can abort the requests using hx-sync while te user is typing, this will probably be better

The beautiful thing about htmx that I love is when the HTML is swapped you don't even see a flicker of html being removed and re-added. It's like nothing happened. Super super cool.

Sounds like a good plan. There might be other ways to achieve what you want as well. If you paste your html code and state what the desired user experience is, we might be able to help more.

Hello guys. A quick question: why does htmx have a

find()

function? And, how is its usage different from javascript's document.querySelector?

Uh, I'm probably doing something stupid, but do I need to import a separate javascript file for the websocket extension?

I can't make it send a connection request...

sample code: <input type="hidden" name="botId" value="" /> <input type="hidden" name="conversationId" value="" /> Enviar

From my experience there is not a difference. I use

htmx.find()

only to find elements that have htmx attributes, and use JS to find elements that are not using htmx attributes.

@rich-television-50179 Thanks. I looked up the source code:

function find(eltOrSelector, selector) {
            if (selector) {
                return eltOrSelector.querySelector(selector);
            } else {
                return find(getDocument(), eltOrSelector);
            }
        }

And it seems to use querySelector internally.

@limited-potato-46306 @hundreds-camera-24900 @mysterious-toddler-20573 I've had a chance to look at this today and have some thoughts. I think Michael's refactor is probably the right approach,

HX-Location

should behave like the other

HX-

headers with respect to history. The

ajaxHelper()

function seems to be internal (at least, it's not part of the documented public JS API) so I think it should be ok to change it as Michael has proposed. I also note that redirect requests do not have knowledge of the origin element that triggers the original request, in particular the

hx-select

attribute, which can lead to unexpected behaviour if you expect a redirect to "act like following a hx-boost link" as its says in the documentation. I've created a new branch incorporating Michaels changes and a fix for the origin element issue here: https://github.com/croxton/htmx/tree/refactor/hx-location Currently all tests are passing. I'm not sure if this will become a PR at this point, just putting it out there for discussion for now. The other issue that @hundreds-camera-24900 encountered (callback passed in the header) is harder to solve. It's not possible to pass a function in the header json (and using

eval()

or similar is dangerous), but I guess you could reference a method of a global object and test if it exists before calling it. Any thoughts welcome.

🙂 I just asked ChatGPT the same question and this is what it gave me:

Both the find() function in htmx and the querySelector() function in JavaScript are used to select elements from the DOM (Document Object Model). However, there are some key differences between the two functions:

The find() function is specific to htmx, while the querySelector() function is a standard DOM function that is supported by all modern browsers.

The find() function is used to select elements within an htmx element, while the querySelector() function is used to select elements from the entire document.

The find() function supports additional features, such as the ability to filter elements by attribute and the ability to select elements within a specific context, while the querySelector() function only allows for selection based on a CSS selector.

The find() function returns an htmx element, which can be used to perform htmx actions, while the querySelector() function returns a standard DOM element, which can be used to perform standard DOM actions.

Overall, the find() function can be a useful tool for working with htmx, while the querySelector() function is a more general-purpose tool for selecting elements from the DOM.

What do you think about this answer?

> The find() function is specific to htmx, while the querySelector() function is a standard DOM function that is supported by all modern browsers. true > The find() function is used to select elements within an htmx element, while the querySelector() function is used to select elements from the entire document. There is no such thing as "htmx element" > The find() function supports additional features, such as the ability to filter elements by attribute and the ability to select elements within a specific context, while the querySelector() function only allows for selection based on a CSS selector. As seen from the source code, this function uses querySelector under the hood, which means that there is no extra filtering logic. I'm not sure what Chat means by "specific context". If it means "allows to select element within a parent", then it's correct, but I think it just generated a vague generic phrase without actual idea.

> The find() function returns an htmx element, which can be used to perform htmx actions, while the querySelector() function returns a standard DOM element, which can be used to perform standard DOM actions. There is no such thing as "htmx element"

Overall, it's an accurate representation of a language model output, when the model lacks knowledge about subject and just generates something that looks similar to other texts about similar topics

that said, if saw this project recently https://news.ycombinator.com/item?id=34262587 and it looks quite promising, but I receive an error, so can't actually make any claims about its accuracy

Interesting

does anyone have an example of a "select all" checkbox on a table using htmx? I've done this with jquery before but I think it makes sense to do with htmx

You are actually better off with JS than htmx for this task. Hyperscript is also a nice option. It can be done with htmx of course, but it would be an overkill