I'll have to code up an extension anyway, so I can do custom serialization anyway, just wondering what the HTML should look like

items[12345][qty]

is what I do for my own forms when I want to submit a list of things. But it does require server-side knowledge that the id is the array key.

It's trivial, but there's no real reason why the key should be the

id

and not, say the

product_code

in our case it actually has to be the id as you can have multiple items of the same product (but with different customizations) in your cart

changing the backend is not an option unfortunately and the typical

items[][qty]

would introduce ambiguity. Maybe it should just be

items[0][qty]

,

items[1][qty]

, ... instead and hidden

items[0][id]

fields, thinking about it

My point was that if you wanted to be really explicit, you could add a hidden field `items[12345][id] value="12345"

and yeah you preempted me there

yeah makes sense

i think i'll go with

items[index][field]

It would certainly make your extension have a more generic use

Yup, cheers @tall-dinner-62086

I asked this before, but I'm now finally needing to implement this for good. I have a page where some HTML elements have drag and drop behavior (with the drag and drop API). These elements belong to an element that is configured to refresh every 5s using HTMX and a

every 5s

trigger. What I need to implement is: the second a user starts dragging, the parent element will not get swapped. Once they release the drag, normally swapping behavior should resume. How can I do this?

Ah, this looks pretty simple actually! I can just hook

htmx:beforeSwap

and cancel it while the drag is active

You could also use a timer + a custom event + some boolean flag as some glue between your drag behavior and the swapping thing. So instead of every 5s, you'd trigger on a custom event, and only send that event when not dragging

Yea that'd work too. As I'm using alpine and already have a "thing I'm dragging or null" variable, piggybacking off that has been easiest

🤣

Is there a builtin way to keep the hx-indicator status even after the request completes, if the response contains an hx-redirect? My issue is that I am submitting a form via htmx... (it's not a full page reload), and while the form is processing on the server I have a nice overlay via hx-indicator -- this part is all good. But when the form is successful, I send an hx-redirect header to redirct to the success page. I would like the overlay to stay in place when this happens, all the way up to the time the browser redirects. Right now what happens is the overlay disappears (because the htmx ajax request has finished), and there is a 1-2 second pause before the page redirect occurs. I could ofc handle this with some custom JS, but it seems like a common enough use case that I figured there was an idiomatic solution.

Hello, I’m new to htmx and I’m struggling getting a swap to work with an

iframe

element. It seems you can’t do

iframe.innerHTML

and you need to do something like

iframe.contentWindow.document.innerHTML

. I thought I could achieve this with something like

document.addEventListener("htmx:beforeSwap", (event) => {
  if (event.detail.target.nodeName === "IFRAME") {
    event.detail.target = event.detail.target.contentWindow.document;
  }
});

But I’m getting weird errors from htmx

TypeError: f2.classList is undefined

. Has anyone ever managed to get swapping working in an iframe element?

Hi all. I have a div which auto-refreshes itself by polling every 2 seconds like this:

<div hx-get="/updates" hx-trigger="every 2s">

. if I want the polling to stop after 2 minutes or after polling some specific number of times, is there any modification I can do to the trigger to do that? How would you suggest I do it?

I don't think you can reach in to iFrames like that

I would use a filter on the poll and call a javascript function that keeps track of time or number of polls:

<div hx-trigger="every 2s[whileStillPolling()]" ...>
     ...
   <div>
   <script>
     function whileStillPolling() {
        return started > currentTime - someInterval;
     }
   </script>

alternatlively you can have a javascript script that implements the polling behavior you want internally using setTimeout() or whatever, and trigger an event on the element that you then listen for (see

htmx.trigger()

)

Is there a way to include only a subset of a form's controls with an

hx-post

? I have a mass edit form and I want the user to be able to save changes to just one item

🤔 is the hx-post in the form?

Or can it be outside?

It would be pretty hard to put it outside

well

ok, this will be harder then. best option maybe filter it in

htmx:configRequest

?

Maybe I'll just give the parent form an id and make all the inputs define "form="parentform"` and put all the controls technically "outside" the form

I hope we respect that 😅