Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So we're looking at the basic directives in HTMLX, and we've looked at h x get, which is just kinda your basic way to send a request and get that back, get the data back, get the HTML. H x target, which tells you where that data is gonna go. And we looked at h x trigger, which says what is going to set that request off. What javascript event are you going to tap into, like a click or, you know, there's a ton of other events, that we talked about with h x trigger, a ton of other options. The next one of these basics that kind of just goes along with them would be achx swap.
Lazarus:So achx swap says, okay, we've got this data, we have a target, we've triggered it, we've gotten it back. Now how do we put that into the target? Or replace the target? Or next to the target? Or behind the target?
Lazarus:Or above the target? You know, whatever it is that you are trying to do, h x swap is going to, sort of, let you decide how that gets added into your DOM. So the most basic one would be inner HTML, which is the default. So if you do nothing, if you just leave h x swap off, and you put a target. So let's say you have a target div, that is empty and had you've given it an ID and that's your target.
Lazarus:The data comes in and it goes into that div and it will just pop up on the page like that. That would be the inner HTML, which these names are taken from JavaScript, you know, you you've probably seen inner HTML before. So another option would be outer HTML. So if you wanna just wanna replace the whole thing. So let's say you have, you know, a good example would be like a login form that once you've logged in gets replaced with a welcome message.
Lazarus:So you don't need the login form anymore. So you can just replace the whole outer HTML of that ID with your welcome message. That would be, you know, a a good way to sort of to use outer HTML. But you also have let's say you're building a list and you click something, you add to the list, and you wanna put that there's a whole bunch of items in there. So you've got after begin and before end.
Lazarus:So those put the response inside the target. So you have your div. It's still inside, but it's either before or after the last child. So that's perfectly good for if you wanna just kind of keep a bunch of items and you wanna just add to that, whether it's at the top or the bottom use after begin or before end as your h x swap equals. If you want to put it adjacent to it, so next to it, So instead of putting it inside your target, you just wanna put another one on top of it or next to it.
Lazarus:You would use before begin and after end. So depending when you wanna put it before or after. So there's a bunch of options. Another one would be delete. So if you just wanna after you get your request back, you just wanna delete whatever your target is.
Lazarus:You know, maybe you don't need that target anymore. And because you've completed the request and because it was successful, now you can delete that button or, you know, a notification if you if you wanna close the notification and and you just want it removed and you want to acknowledge and you send a get that says, okay, I've acknowledged this notification. Once that comes back, it'll say just, okay, delete that target element gone gone from the dom. And then you can just say none. So h x swap equals none, which just says don't do anything.
Lazarus:Just you can have a target, that's fine. But this is a good way to just have send a request that's gonna do something on the server, update something, but then do nothing. H x swap equals none, and it's not going to, you know, put that return data anywhere. There's also modifiers for h x swap similar to h x trigger, how there's you know, you you have your regular directives, your regular things that you use for it, but then you've got your modifiers on each of those. So you can have a transition modifier, you can have timing modifiers.
Lazarus:So let's say you want to do something fancy with, you know, those you might not need to get into these yet, but you wanna do something fancy with CSS animations. We can get into that kind of stuff later when it's not the basics, but you have a swap and settle, which says, like, which part of this request. And and when once everything happens with the HTML, do you wanna do something then? You can also work with the scroll. So if you want to set h x swap equals, you know, outer HTML space scroll, then the page will scroll to where that target is after it's successfully loaded.
Lazarus:There's other also there's advanced usages for it, but, we don't need to talk about those now. The main thing is just you can think of h x swap going along with everything else, you know, they all kinda work together and it's the more you sort of get used to this. H x swap is the thing that decides how the data goes on to your target. Is it inside it, replacing it, next to it, in a list, does it add to it? And, you know, once you sort of get a handle on all these things get to how these sort of four things, these four basic things, and we'll add to it, but so far we've done we've talked about 4 of them.
Lazarus:You can use them all together and just kind of put the data however you want, wherever you want on the page. There is also just to be clear there's an h x swap dash o o b, which is out of band. And this is a separate directive. We're not going to talk about this now, but it is something that you actually send from the server side to update random to update other parts of the page that you want to. Out of band means it it's gonna be outside the target that you set.
Lazarus:So just keep in mind that that option is there but it's separate from h x swap. It's actually its own directive.