like I'm getting a 'target error' in the console but I'm not sure which code is causing this problem

You can turn debugging on: https://htmx.org/docs/#debugging

thanks

And sorry, I couldn't find this googling. Is it possible to have two different hx-get request be triggered from the same element?

Like I have a select dropdown. And when the user changes the value I wanted to trigger an hx-get="A url" with hx-target="#1" .... and hx-get="B url" with hx-target="#2"

Just on the off chance you haven't seen it, there's https://htmx.org/attributes/hx-swap-oob/. One URL but the response can be broken up and sent to different places based on id - at least I think that's how it works 😆

What @mammoth-family-48524 said. OOB swap if you can get away with one url.

ok, I'll take a look thanks guys

can I also just set up a "dummy div" with a hx-trigger="change from..."?

One of the things I find challenging with HTMX is the error messages don't tell me a lot; but this one helped me solve my problem instantly! > htmx.js:1845 The selector "#edit-activity-dialog-form sl-input, #edit-activity-dialog-form sl-radio-group, #edit-activity-dialog-form sl-textarea, #edit-activity-dialog-form sl-range" on hx-include returned no matches! 👏 (<-- thank you emoji)

What would this do for you?

just let me get two different hx-get requests from the same select option change. One written on the select itself, and the other one I can write on the dummy div

Hrm, so what you can do in the hx-swap-oob is "piggy back" an extra dom change on a main one. So you say the HTMX request, e.g. a hx-post, should target #1. But then you also sneakily include extra HTML in the response which is like > And when HTMX sees that hx-swap-oob attribute it knows to replace the content of #2 with this new div.

My musings - feel free to ignore 😁 --> I struggled with the OOB concept personally. I think because I learnt HTMX as being these attributes that you put on an element for something like a POST request, and the attributes say what url to request, and what bit of the DOM to change. And it's nice if there's only one bit of DOM to change, but when you want to change a couple of bits of the DOM in different ways, then you still tell HTMX where to change the DOM using the attributes on the thing the user clicks, but only for the first DOM change - all the other other DOM changes are specified in the response, rather than the request. I think I expected all DOM changes to be in the one place, and so OOB felt like a hack; but it's not really a hack because you'll obviously have some scenarios where you want to update a couple of bits of the UI at once. I almost want a quick mode for single DOM changes, and an advanced mode for changing multiple parts of the DOM. 🤷

If I’ve understood what you’re asking correctly (and assuming you need to call two endpoints, rather than one with the OOB option): You could include an HX-Trigger response header from the initial hx-get URL, then listen for that event on a separate element to trigger an hx-get to another endpoint.

Ok, I think this is also what I am struggling with. Is there a tutorial or some example code I could look at for OOB?

because that's exactly what I'm trying to do, do multiple DOM changes.

This one covers OOB as well as other ways to achieve the same effect https://htmx.org/examples/update-other-content/

Hey - can anyone point me to a simple example / reference for using htmx in HTML forms? I am using htmx fine in other elements, but getting forms to use htmx is stumping me ...

I have just done my first OOB swap (about an hour ago 😁 ), but the last time I did multiple DOM changes, I used events and AlpineJS to make the change additional DOM change. It was probably a really small DOM update the last time, whereas this time I want to update the DOM in 2 places with some server rendered code because the server has easy access to the database.

I don't know of any offhand unfortunately. Something I didn't realise initially with forms though is you can put the HTMX attributes on the form (e.g.

<form hx-post="/your/url" hx-swap="outerHTML" hx-target="#maybe-you-want-to-specify-a-target-too">

, include a

<button type="submit">

in the form, and it'll just work. HTMX will automatically include all the standard HTML form elements in the POST request sent to the server. I like to swap all my form fields in a

<form>

element for this reason - it seems nice 😆

If you want to include form elements that aren't the standard ones (input, textarea, etc), you can use https://htmx.org/attributes/hx-include/

OOB Swap: So in the html that's going to come into the DOM, inside that any html inside a tag with 'hx-swap-oob' can instead be placed outside the target?

like this?

do I have that right?

Hrm, I think that will work. I have done it like this:

<!-- this is the html that htmx is going to put in the target -->
<div>
  <h1>Hello World</h1>
</div>
<h2 id="somewhereelse" hx-swap-oob="true">This message will not go with the h1 text, rather it will be put in the div with the id somewhereelse</h2>

oh ok, but either way that's amazing

so it just looks for a matching id