Advanced htmx: hx-select-oob
So the next attribute we're gonna talk about here is h x select o o b. And this lets you select elements by ID out of your response. So you get your response as normal, and then you can place the different parts of that response. So that response, let's say it has a div inside some element with an a particular ID, if that ID matches something else anywhere on your page then you can use hx select o o b to place the element with that ID from your response into the rest of your page where that ID is. So that aspect of anywhere on your page, that is the out of band, that's o o b.
Lazarus:So h x select o o b, so what it's doing is it's letting you select from your response and place it o o b out of band. And and we've seen this behavior before with the swap o o b. So the difference, there's an h x swap o o b that we talked about, last season. The difference is that the swap is something you set in the response. That happens on the server.
Lazarus:So in your response, you set certain div, certain IDs to operate with HX swap OOB. That's setting, you know, on your response side. With select OOB, you set it from the client side, so before the request is even sent. So where the request originates, that's where you're gonna set your select o o b. Now the format is h x select, h x dash select dash o o b equals, and then your, you know, hash, your pound ID, whatever your ID is.
Lazarus:So it's a CSS selector, and the data with that ID goes on to the page where the element with that ID already is. So it just kind of swaps it out. Just, boop, you would do a select, takes the takes it from your request and puts it anywhere on the page. The rest of the data, so you could have a whole, you know, a big long thing that's returned. It takes that one ID out.
Lazarus:The rest of the data just goes to the target as normal. So you did an h x get request, maybe you have a target, maybe you don't, but the rest of that request is just gonna be still there and it's still gonna go to your target. But the ID that you that you used in the h x select o o b is going to be extracted. Okay. So what does this mean?
Lazarus:The most basic example would probably be a notifications or an alert div. So you might have a fixed div alert, a fixed alert on your on your page somewhere where you can display messages to the user. And they can see that wherever they are, you know, whatever part of the page. Maybe they scroll it's but it's fixed to, like, the bottom right or something like that. That's kind of a classic example.
Lazarus:So you can set that to be your, you know, hashtag alert, and when you do your select OOB, you set whatever alerts on your server side that's going to be, and that when that alert comes back. So maybe every request has an optional alert on it that your server decides, okay, do we need to alert the user? So if you do h x select o o b, then you can, from that request, from that response that comes back, it'll take out the ID alerts and put it directly into your fixed alert on the rest of your page so that the content of the message is from the server and it's now in the alert div on the rest of your page. That's the basic usage, but you have options. You have lots of options you can do here.
Lazarus:First of all, you can set as many IDs as you want, so it doesn't just have to be one ID that you you select here. You could have, you know, 7 you could have your content split into 7 parts, 7 different IDs, and they all go to different places on your page, if that's what you want to do. The other option is how the data gets placed. So by default, you're just swapping them out, like, and that's what you're going to have to do. That's what you're going to want to do, you know, 90% of the time, 99% of the time.
Lazarus:You have your alert div. You're just going to swap out your alert div with something else. But you do have options similar to your HX swap options, the same options. So by default, you're, you're doing outer HTML, which is just replacing the whole thing, but you can do inner HTML. So you could take your, your, the ID that you're replacing, and you could put it inside the HTML.
Lazarus:So then it would take all that all your your full div, your full div and put that inside the other div rather than replacing it inside the one with the ID. That would be inner HTML. There's also like before begin, after begin, before end, after end. There's just these other options, and that's like if you're making a list. If you don't want to replace it, you just want to add you keep a running list of all the alerts that have happened as you're navigating through the site.
Lazarus:That's fine. So if you want to do that, you can set that by using the colon. So to set the swap value for each ID, you just add a colon and then the swap value you want to use, so that whatever technique it is that you want to do that swap with. So the final result would be hx select dash 0OB equals pound alertcolonafterbegin, for example. And then you can do we can keep doing this.
Lazarus:You can do a comma and you can choose another div to replace, another ID to replace. And for that one, you can choose your own. If you want a different swap value you can too with a colon. So this can be used, along with other attributes like hx select. So hx select is already sort of taking a large response and selecting.
Lazarus:So sort of filter down what parts of it come back. So you could use that in the same way, and it's not necessary. HX select, you don't you do not need HX select to use HX select OOB. But you know they they can pair nicely. I think it also pairs nicely with hx swap equals none.
Lazarus:So hx swap equals none is just a way of saying the data that comes back don't put it anywhere, right? Because hx swap by default is let's say you have a get to somewhere and you put the HTML into something. HX swap none just means don't do anything with the HTML you get back. So you can set HX swap equals none, but if you're using h x select o o b then you can still pull all those IDs out. So even though the end result of the content isn't going anywhere, all the stuff from the select o o b, all those IDs, those are going to get, you know, traffic copped to the right place, and then it just puts the rest of the content nowhere.
Lazarus:So just that's just an option. If you if you want to sort of use this as a way to just update certain dynamic parts of your site that needed to be updated, alerts, notifications, counts, you know, all these different sort of possibilities. And, and these in general, these out of band OOB functions, the select and the swap, they are some of the most, the most magical and the most powerful HTMX commands. I think they're going to solve a lot of edge cases where you're just like, I don't know how to put this there, you know, what do I have to run this request? Where do I run this from?
Lazarus:And sometimes the answer is it doesn't you don't need to think about it that much. You just use the select out of band or on the server side, you use the swap out of band and you tell htmx which ids are going to get replaced with the new data. Where are you going to update these? And that's 90% of the time what you're doing. You're updating data by a particular ID, and it doesn't matter where on the page that data is.
Lazarus:You're using the OOB to ensure that it's going to go anywhere, you know, regardless of what the target for your current request is it's going to get onto the page. So these just give you a ton of control over user interface, and they let you basically, be that traffic cop for your data in the different div IDs.
