The basics: hx-swap-oob

This is a new idea: let your response decide its own target(s)! 

<div id="my-update-div" hx-swap-oob="true">Updated html</div>

<div id="my-update-div-2" hx-swap-oob="true">More updated html elsewhere on the page</div>

What is hx-pod?

Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs

Lazarus: 00:00

So I've been focusing the first episodes of this podcast as, you know, HTMLX basics, and I struggled a little bit with where h x swap o o b out of band, should go because that it kind of could be seen as like an advanced usage of, you know, it's h x swap, but it's not really it's not really has that much to do with hxswap, actually. It's kind of its own thing, and I think it's such a key part of the power. So it's a key part of what you can do with h t m x that is cool. Like this should be part of your arsenal no matter what level of programmer you are. It's just kind of such a fundamental and an interesting thing you can do.

Lazarus: 00:45

So hxswap out of band, o o b, lets you put something from the response. So this is something you do instead of putting it ahead of time into the, you know, into your HTML that you are, you know, as as an attribute on your existing HTML, it's something that goes into the response HTML. So it's a little different than the other things, which are all you put them ahead of time in the HTML that the user's gonna be interacting with. This is something that when you craft your response from something else, so, you know, the user does something, it sends an h x get, this response that comes back with HTML in it, this is where you're gonna put your hx swap out of band OOB. So why would you want to do it?

Lazarus: 01:32

What it lets you do, the out of band means that it lets you place something outside of where the normal target is. So when you send some sort of request whether it's a GET or a POST and you set the HX target for that, all your data is going to go in there and it can get swapped in, we've talked about HX swap before, you can replace the data, you can put it next to it in the list, but it's all contained within whatever your target is, so it looks at your target unless you use this HX swap OOB. And what you do is you set up return elements that are on their own level, so just kind of outside of your normal response. So you just think of it like a dom. You've got your div, that's a response, whatever the element is, div, table, etcetera.

Lazarus: 02:23

That's your normal response. It's gonna come back from that. But so you don't put this inside that. What you want to do is you want to separate it out into its own little snippet, and then on that element you put h x swap o o b equals true. And then you set that ID of that element to be the ID of whatever you want to swap with.

Lazarus: 02:45

So let's say you have on your page I think a classic example of this would be like a notifications. You have a little thing that says, oh, there's 3 notifications, and they click and they see their notifications. That little snippet that says there's 3 notifications, that might be fixed on your page. That's outside of the target of where you're clicking. It's just somewhere else.

Lazarus: 03:06

It's, you know, a little notification that is always visible or something like that, but it's in a place that's not necessarily where you're putting the other notifications information. So what you can do is you can set that replacement HTML, which has everything that you want to put there at the ID that you're setting it to. So your ID could be like notifications div or something like that, whatever whatever the ID is there, and you put your information, your new information, into that, and you set h x swap o o b equals true, and that is then going to get placed anywhere on the page that that ID is. So this could be used for all kinds of stuff. This could be used for refreshing like a user profile.

Lazarus: 03:47

So if you change your profile picture, but that profile picture is up at the top right of your page in a little circle or something like that, and you wanna swap out that ID, you can set that. You can put the new code, the new HTML for that new for that new picture, set it to h x swap o b equals true, give it the same ID, and boom, it's gonna be updated with that request. So regardless of what the request was about, you can add the HX swap OB and and replace any other part of the site. This could be used for real time data updates all around the page. Shopping cart is kind of a classic example of this where your shopping cart is usually stored somewhere so you can always see what the little number is.

Lazarus: 04:31

Form submission feedback. So if you have a special place where you show all the feedback and you wanna update over there, you could use it for that. I mean, it's kind of, you know, it's another one of those things. You don't also have to just have one of these. So you could put a whole bunch of them in.

Lazarus: 04:46

You wanna replace a whole bunch of places on your page at once because you made some change to the site. That's, you know, if you have, let's say there's like 7 things you're tracking and now you're tracking 8 things, and that's gonna affect a whole bunch of different parts of the site. This is a good opportunity to just have an option that updates everything and that response tells everything where to go, what to update. This is good for real time stuff and and for kind of collaborative things where different users need to see different things and as there are changes that can be sent all around the site. So it's not exactly it you know, maybe the usage you could consider advanced, but I think this is really one of the key things in h t m x is different from your other directives, different from your other attributes, but one of the really key things that is very powerful.