at some point, I'm sure we are going to write a sloppy JSON parser 😑

can we see your HTML?

I don't have turbolinks or hotwire in my app, so it's not those. I can't tell from the network tab where the request is coming from. There's nothing under the "Initiator" tab, just "This request has no initiator data." Does that mean it's not coming from JS?

it sounds like for some reason the request isn't being `preventDefault`'ed

can you debug it w/ the uncompressed version of htmx and see if that line gets hit?

I got it working with something like this:

<li><label for="id_events_9"><input type="checkbox" name="events" value="102" hx-get="/participations/export/" hx-include="input[name="events"]" hx-target="#days-list" hx-trigger="change" id="id_events_9" class="field field--checkbox">
Event 1</label>
</li>
<li><label for="id_events_10"><input type="checkbox" name="events" value="98" hx-get="/participations/export/" hx-include="input[name="events"]" hx-target="#days-list" hx-trigger="change" id="id_events_10" class="field field--checkbox">
Event 2</label>
</li>

But then I added

load

to the trigger and it triggered 50 requests on page load 😅 I ended up putting the

hx

attributes on the parent element:

<div hx-get="/participations/export/" hx-include="input[name='events']" hx-trigger="load, change from:input[name='events']" hx-target="#days-list">
... all the <input name="events"> here
</div>

It seems to be working fine, but maybe there’s a better way to do it?

I just did that and it does hit that line. When it gets there, the

POST

hasn't fired in the network tab. Then when I hit continue, the

PATCH

goes out, then a moment later, the

POST

goes out too. There's a very short delay between them. But the

PATCH

definitely hasn't resolved yet when the

POST

goes out, so it can't be anything to do with the response of that request

Ah, I think I figured it out. I've got some custom JS that seems to be doing

form.submit()

, which skips the

submit

event 🙄

Was going to say: feels like some scripting messing with us 😀

Hello, new htmx clojure developer here. I am implementing tabs on a page exactly like the HATEOAS example from the htmx site. The content of each tab consists of input fields and a Save button to post the fields to the server. I want to prevent the user going to a different tab if the current tab has unsaved changes. Is there a hypermedia pattern I may be not seeing to do that? Or, am I assuming correctly, that I will need to sprinkle in some scripting to prevent a change of tab if there are unsaved changes.

Look at how https://htmx.org/examples/edit-row/ shows an example of

halt

and

trigger

with hyperscript where you can prevent default behavior if a certain condition is met

you don't have to use Swal here, but for example adding a class to the switched tab parent element (or something, not the input itself) whenever a change happens on an input field, then clicking on a tab would check if said class exists then

halt

, preventing a tab switch after changing something. Of course, whenever you save, you remove the respective class again.

thank you

that looks a little elaborate, but not insane

is there a way to swap the new HTML into multiple nodes on the page if the selector matches both? (eg a class selector)

seems like the default behavior is just to swap the top-most one in the DOM

right now, no, you'd need to use an oob swap to target multiple elements unfortunately

shoot... any plans for that? i've got the same toggle in multiple spots on my page -- when i toggle it in either place it would be great to update it on both

oob swap is kinda tough in this case because the 2 elements are literally identical (rendered from the same partial template)

I was hoping to add it in htmx 2, since it would technically be a breaking change

in the meantime, we could build an extension that does this I think

i wonder if you could introduce a flag in hx-target or hx-swap to turn this behavior on optionally, maintain backwards compat

something like

hx-target=".element:all"

that's a good idea

would need to think about the syntax

meantime i'll look at writing a little extension to help me, thanks 👍

never written an htmx extension, if you've got pointers on where to start on this particular one i'm all ears

reading the extension docs and examples now

An htmx extension seems like overkill. I would just add a handler for the "afterSwap" event on one of your targets, then clone it to the other place. Just to say if the htmx extension part feel daunting, you don't need it

honestly extensions look way easy to implement and this functionality may be useful in other places on my project so i'll give that a go first -- probably end up using afterSwap inside the extension actually