Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So our next response header here is hx reswap. And this allows you to run code as if you had used the hx swap on the front end. So just a reminder, this is a response header sent from the back end back to your h tmx request, and it lets you either add in or override the existing hx swap value. So there are, you know, there may not be an hx swap value. This lets you add 1.
Lazarus:So h x reswap. And just as a reminder those swap values, inner html replaces the inner HTML of the target element, outer HTML replaces your entire target, with what what the response is. Before begin inserts the response before the target element. After begin inserts the response before the first child of the target element. So, you know, that's like a list that's putting it at the top of that list.
Lazarus:Before end it's the same thing. If you have a bunch of children it puts it into that list, as the last child of that element, and then after end inserts the response after the target element. So, anyway, we don't need to go through all those. There's also delete and none. Delete will just remove it, which, actually, you might you could use reswap for just to delete something, you know, if you choose to just get rid of it rather than to, you know, swap it in or out or anything like that.
Lazarus:So this can be combined with the other response headers, like reselect and retarget, which we have not talked about yet, but, this is sort of the first one of those re, you know, re swap, reselect, retarget, kind of go together. And they basically simulate the combination of attributes that are already there on the front end. So h x swap, h x target, h x select. And these are sort of the, you know, the equivalent of those commands, but they're response headers. So and like all these response headers, you might never need to use them.
Lazarus:It's just sort of in those cases where you wanna do an override. So let's say you have a a list of items, and you've got a form and you're clicking to add to that. We can just keep it super simple with, like, a to do list or something like that. So on the back end, you could do a check, and let's say you add an item to this list, and, something about it you want to check and say, oh, does this have to do with, you know, maybe this project, or this timeline, or something like that. So you could do a check and decide that this item is extremely important, the one they just added.
Lazarus:So maybe instead of the original swap hx swap value, which was you just add it to the bottom of a list or something like that, maybe you want to re swap it. You want to, in your code on the server side, when you do that check and see, okay, is there something special about this item? Maybe it maybe it just deserves, you know, to be up at the top. So you could, instead of using, instead of using before end, which would put at the bottom, you could use, before begin or after begin or or one of the other swap options to put it somewhere else. Put it, someplace relevant, maybe you're also adding some styling to it so it, like, you know, stands out or is bold or something like that.
Lazarus:So this just gives you the option to change what your h x swap is or to add a new hx swap value. So this reswap response header. It gives you that control to, sort of, override the htmx attributes that were sent from the front end, which you may never ever need to do. But if you do, you'll be glad it's there, and the next time we will do retarget and then reselect, which are just like reswap in that they are sort of the sister response headers to their attributes. So h x target and h x select are the original attributes, retarget and reselect, are the response headers that kind of override them.
Lazarus:So we'll be doing those ones next.