The basics: hx-preserve

Updating a chunk of the DOM is easy --  but what if you wanted to leave one element alone?

<div id="leave-me-alone" hx-preserve>Content preserved</div>

Content will NOT be swapped out in the request, as long as the id in the request data matches.

https://htmx.org/attributes/hx-preserve/

What is hx-pod?

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

Lazarus: 00:07

So we're finishing up kind of the basics, for this season, the basic attributes. And this is gonna be a short one. This is h x preserve. And the idea behind this is that when you're making an update, and you so you have a request and it goes in, it's gonna update something. If you want something in the the area that's being updated, if you want to leave something out so that it's not updated, you can set h x preserve on it.

Lazarus: 00:36

And this is unusual from the other attributes. They're usually, you know, h x get equals, h x swap equals. This one you can just put on with none. Just h x preserve, just put it on to the element. And it has to have an ID.

Lazarus: 00:52

So it's to know so it knows, you know, exactly which div it is that it's that it's not going to bring in the new data for. You have to set an ID on it. And, basically, once you set h x preserve, when that update comes in, it is not going to affect what's already there. There are a few and, okay, so why would you do this, first of all? A great example would be if you have something like audio playing or a video or something like that.

Lazarus: 01:24

So if you want to update a whole section but leave one area alone, or if that area has, you know, other sort of temporary user updates that are already on it, You just may wanna leave that out of the it hasn't been pushed to the server yet. You know? So you just wanna leave that out of the updates. So that's why, you know, you'd have different reasons why you might set h x preserve. There are a couple caveats to that.

Lazarus: 01:49

The input type equals text could you could you lose your focus, and you can lose some stuff. So it's there are a few things, iframes, and just a couple gotchas. In those cases, the documentation on HTMLX gives you some some ways to work around it. That's not something that's, we're gonna go over in in the basics here. But just overall, if you wanna leave something alone, if you wanna keep something so that it does not get updated while you still update everything around it, then h x preserve.

Lazarus: 02:24

Just put h x preserve on it with no equals, nothing else, just h x preserve, and that will remain untouched.