Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So I think this might be the last attribute we're going to do for the basics in h t m x, and it's h x select. So h x select allows you to use a CSS selector to determine which section of the response, the HTML response you get from the server, which section of that to use. So, generally, when you make a request with hx get or hx post or whatever else it is, you get your response. That's HTML. That's just all standard HTML so far, and you can customize how you get that response, where you put it, all that kind of stuff.
Lazarus:But, generally, whatever you do with the response, you do with the whole response. So your end points have, you know, some HTML, and and that HTML is put in different places using h x swap and h x target, but it's always by default is the entire response that is dealt with, and and whatever happens, happens with that full response in all the HTML. H x select allows you to, instead of using the full response, to use that CSS selector and pick out which part of the response you want to use to place somewhere or to put into your DOM, whatever you're going to do with it. There's different things you can do with with that response using some of the other attributes. So this could be used for kind of one off situations, or it could be part of, a pattern where if you want to have fewer end points.
Lazarus:So let's say you have something, like a just a a big long form with a lot of different parts, and, you know, it's it's got, some validation and some other stuff. So rather than having a whole bunch of different endpoints that check every part of the form and send you back some little snippet that's perfectly, you know, just kind of perfectly pinpointed to the exact place, you might end up with a lot of endpoints like that. So I would say h x select, you could use that as part of a pattern where you have fewer endpoints. Let's say you could even have one end point for the whole page, and or for the whole form. And then as you are getting that response back, you have IDs on the specific part that you want to replace, and you just set that h x select equals that ID.
Lazarus:One of the reasons you would do this, you know, it's not, I would say, the the bottleneck for, doing these HTMLs, or just any sort of ajax call, it's it's not usually the size of the HTML response that you get back. So you can deal with larger responses and just kinda take what you need from it using h x select. That's kind of a good use for it. And it works with all the other attributes, so, you know, just by default, you're always just returning the full HTML In the other, you know, whenever you do any of the other stuff, the h x target, h x get, you're just working with the full HTML. If you wanna work with a snippet, just part of it, and part of the response, you just add h x select into any other attributes that you're already using.
Lazarus:So, let's think of an example. If you have a list of items and it's just a long list of items, you give each one their own ID. So you can have your endpoint just be the full list. Right? Your list of items, you're editing it, you're changing something, you're updating something, each one of those has an ID.
Lazarus:So, when you make that change, you just have your endpoint be the full list again, but h x select equals the ID of that item. And so it's going to go and it's going to get the full list from your server, and it's going to respond, and you can then just take that ID in the response of the item that you want to get and swap in. So then you set hxswap to the same ID, and you're putting the stuff you got from the response using hx select into that place using hx swap. So, that's just a way to kind of, you know, this is all preference, how you want to set up your code base, how many endpoints you want to have. Hx select gives you a powerful tool for taking all the stuff and just getting what you need out of it.
Lazarus:So this could be useful also for CSS transitions and animations because it it simplifies the footprint of what is actually being changed or looked at in the DOM. So if you're if you're replacing an entire page, replacing a large form, replacing a bunch of things, that's just a little heavier in what's happening when the, when the DOM, is updated. So if you want if really you're just caring about this one little section that you're doing, and you just want the CSS or whatever else, the animation or something, to just kind of focus on that, it just makes the whole thing much simpler. So, conceptually, it's easier. You know you're replacing this one little part, that's what's going to be affected, that's what's going to change.
Lazarus:And you can use select o o b. So there there's another h x select, has it's it's not the same, but h x select o o b can be used with it if you'd like to select things that are OOB is out of band. So things that are not in the target, you can place things there. But I think the h x select o o b, it has enough options and kind of features and its own little edge cases that I think will save that for the advanced. So we'll just talk about hx select now.
Lazarus:So we saw kind of saw how there's several attributes that work together to customize what variables and values you send in. Hxvals, hx params, hxinclude. You could sort of think of those as a group. So if you think of these attributes in kind of groups, those are all those are some of the sending ones. H x select is part of a group that lets you customize what you do with the returned HTML.
Lazarus:So h x target is kind of to say where you want to put this HTML. H x swap says how you put it there, you know, before, after, replacing, inside of, etc. And then h x select is to just take the part of the HTML from the response that you need. So using those 3 together you can really pinpoint and kind of do exactly what you need to do, with the HTML in your response. I think in the next next time before we wrap up season 1, I think we may may be worth kind of looking at all the attributes we've done and kind of putting them into groups so that kind of mentally we can kinda keep these together and and sort of figure out when you're doing different parts.
Lazarus:You know, there's a lot of different attributes, so kind of giving sort of an overall picture of where all these basic ones fit together. I think that'll probably be the next episode.