Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
Next request header we're gonna do here is h x target. So this request header contains the ID of the target when you set h x target, as an attribute. So it uses that attribute HX target. If you've set it to an ID of something on the page, then this request header will get sent along with the request. So that makes sense.
Lazarus:And this lets you check where the data will be placed once it's sent back. So you can check on your server side, which otherwise, you know, maybe you your server sort of doesn't know because that's kind of handled on the front end. You said HX target in your dom. You see, you know, on your request, you set that. So when the response comes back, it's going to place it where you set the HX target.
Lazarus:But you might want to, like all these request headers, branch off on your server, branch off and do something different in the code based on, for instance, what the target is. Why would you wanna do that? There's different reasons. Every time data is sent to that particular target, you know, maybe that's a notifications thing. Maybe you want to add something else, like in a little additional bit of data that otherwise wouldn't be there if this was sent, to a different target.
Lazarus:Or maybe you want to add, like, a swap OOB, which is, you know, on the server side, lets you send additional data, but send it to another target as well. So maybe if it's going to a certain target in HX target, maybe you want to then say, okay, well, let's actually put some other data, you know, in some other other separate place on the page, but only when this certain place is being targeted. So your reasons for that, like all this stuff, those are your own. This just gives you the ability to check on the server side what your target is. So there are 2 things that have to be true for this to show up in your network requests, the HX target request header, you know, or specifically in the inspect element in the tab, the network tab of your inspect element, and then they get sent to your server.
Lazarus:So the 2 things that need to be there. First of all, you have to have defined a target using HX target. So HX target equals, you know, if let's say you're doing an HX get, and very common pattern, you just do an HX get with an HX target, that's gonna get a snippet and place it in the target. Right? That's it.
Lazarus:So that's maybe going to send the header, but only if the target you defined has an ID. So that's kind of an interesting, caveat here is the h x target lets you define a CSS selector. So h x target, the attribute, h x target equals. You can define a CSS selector, as your target. So it doesn't have to be an ID when you set h x target, but the HX target request header, is a little different.
Lazarus:If you just set, you know, a class or something like that, then your HX target header, request header is not going to be there because it it requires it to be an ID. It has to be an ID that you are sending this to. So a specific ID within your Dom. And so those are the 2 things it needs. You need to define an HX target, and that HX target has to be just an ID.
Lazarus:Otherwise, this, you know, HX target request headers is not gonna get sent. You know, your HX target will still work. It's just a matter that specifically, the HX target request header requires it to be an ID. So that's the HX target request header, and we're gonna probably do you know, these these request headers are kind of tiny sometimes. It's just a boolean, it's just something.
Lazarus:So I'll probably still go through them 1 by 1, but they're gonna be very short, and and maybe just kind of put them, you know, in very very small episodes, and then move on to the to the, response headers.