hard to understand when some of these rules apply

I think I saw this earlier. So the contents of the oob swap is mainly superficial, only for use with htmx, so I can't expect to have any classes used on it applied to wherever it swaps

now i get it

htmx is interpreting the empty content as "replace the target's innerHTML with empty space"

If you only want oob swaps to apply, you can return a

204 - No Content

response code: https://htmx.org/docs/#requests

hmm, I think for that issue I'm fine with the hx-swap=none in the few cases it occurs. As far as the other issue, with the innerhtml of the oob swap I think it's just a matter of understanding the div with the oob swap should just have htmx attributes, since everything else gets thrown out

Question about HX-Trigger response headers: I’m returning

HX-Trigger: openCreateModal

from my server, and listening to it on a button like:

<button id="open-modal-btn" hx-trigger="click, openCreateModal from:body“ hx-get="{% url 'open-modal' %}" hx-etc…>
  Create Project
</button>

On click, this calls the

open-modal

endpoint and swaps the modal content into the page, but the

openCreateModal

event doesn’t seem to trigger. This is for first page load, so users can copy and paste a URL with a payload like

?modal=createProject

into their browser and it would automatically open the modal. As this is on page load, I can’t seem to inspect the events being fired in the browser console. Any ideas why this isn’t working?

^ I guess my question is does HX-Trigger work on full page load or only on htmx requests?

No, htmx only reads headers from XHRs sent by htmx. You can use

load

or

revealed

event for similar effect https://htmx.org/attributes/hx-trigger/

Ok, makes sense, thanks. Need to work out how to apply the load trigger conditionally depending on the url params, but should be doable with some django template logic

Hi there, quick question I have a table and I am trying to use hx-swap="afterend" to do infinite scroll. But the server is returning the entire table not just the portion of it. How can I use hx-select to select only the rows knowing that they don't have a container around them other than the but I can't insert the tbody. Basically I am looking at selecting the innerHTML of the tbody of page=2

Ok the solution was actually dead simple

hx-select="tbody > tr"

just use a normal css selector to get all tr childs from tbody

Anyone? 👀

hx-include

sounds like the correct approach if the

textarea

is not inside the

post

-ing element (often a form). There is also `htmx:configRequest`: https://htmx.org/events/#htmx:configRequest and `hx-vals`: https://htmx.org/attributes/hx-vals/

But whatever you select with

hx-include

should be in the request payload in its original, non-url-encoded format, even if it also shows in the url params. That's my understanding of it anyway

what effect does htmx have on SEO. If you use a trigger hx-get would google see this?

SEO is fine as long as you follow the rules of progressive enhancement

if you want google to index something you should use a link and hx-boost instead of hx-get

thx

i don't understand the question. You can include data with

hx-include

. There is no

hx-body

attribute. You can target other elements with

hx-target

or using out of band swaps, if that's what you mean, and if the server is returning JSON you can use the client side templates extension as a base for your own code.

I had a recent scenario where I have an endpoint protected with CSRF tokens, which could be used to delete an item within a list. How I did it was to put the list inside a

form

, then put the link with the ID to be deleted into the URL which is posted via

hx-post

. This way, it includes the CSRF tokens, but each item's "Delete" link posts to the correct endpoint for that item. I don't know if you're solving a similar issue, but that pattern should work for any sort of values you want to have "automatically" included in your POST. This example uses Liquid, but as long as you structure your HTML in a similar way, you should get similar results. https://github.com/bit-badger/myWebLog/blob/main/src/admin-theme/category-list-body.liquid

Thanks for sharing this. It's nice that you didn't have to use any JS. I guess the key is that an

hx-post

inside a form will submit all the form elements.

It's not a secret, but it's also easily overlooked. 🙂 https://htmx.org/docs/#parameters (2nd sentence under that heading)

i don t understand the question You can

javascript

i love it

just trying to upgrade a static website generator

@gorgeous-ghost-95789 if you want me to switch to go, now's your shot

use Hugo 🐢