Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So this is just like a little bonus thing on on using hxswap0ob. A little example, that I just worked on, so I figured I I would put it up here. Right now I'm building, in a like a comprehensive listing of h t m x examples. It hasn't been put out yet, but I've tweeted about it a few times. I put some stuff up.
Lazarus:Been working on it for a while, but I kind of want to wait until it has a whole bunch of stuff on it so that it doesn't kind of come out and not really have that much on it, and then it just of people see it once and it's incomplete and then they never see it again. So I'm kind of waiting to to release it. Anyway, it I'm recording the podcasts at the same time. And I just thought to myself, it would be nice if along with each example and each attribute, if there was a specific podcast that talked about it, that I've already made, you know, some people learn better hearing stuff, or they want to kind of, like, they don't have a minute to read the code, or they wanna get, like, a background on the actual attribute. Whatever the reason is if we already have a podcast episode recorded for it, by we I mean I, then I want to link it to that attribute so that at the you know, in the examples page there could be a little section that's like here's some podcast episodes that talk about it, with a link directly to the episode.
Lazarus:So, you know, that could be done manually and every time I do a podcast thing I just copy it and put it up there and that's fine. But since I am a developer and I might forget to do that or it might become cumbersome, it might slow me down. I think anything that you can build that just gives you a little automated thing is great. So I thought I already can access all the podcast episodes. There's like RSS feeds, you know, I can I use transistor FM which is great?
Lazarus:And so if I can already get a list of all those episodes, in the episode titles or the descriptions, and I'm just going to work with the titles for now, I've always put the name of the attribute, so h x target, h x gets, h x posts, h x swap, and now this one, h x swap o o b. So I have that information. I have which podcasts reference which attributes. So wouldn't it be nice if I could just sort of scan that for each attribute and put up onto the page, a link to that podcast episode along with each attribute. So that sounded nice, and I was thinking, okay, I'm gonna I'm building the whole site with h t m x, of course, because it's an h t m x examples page.
Lazarus:So wouldn't it be nice to be able to use it? What could I use in h x swap o o b, because there's going to be a bunch of directives. And rather than sort of slow the site down with, okay, when it loads it also has to load this transistor FM, RSS feed, or, you know, whatever the source is, I can use h x trigger equals load. So that when the page loads, it will send so I use h x get first to get the, you know, whatever response I'm gonna be building this HTML in. So h x get with an h x trigger equals load.
Lazarus:That's just like a lazy loading thing. Use that for all kinds of stuff. Just anything you don't want to be loaded along with the initial page load. It doesn't need to be. It's way down on the page, whatever the reason is.
Lazarus:So we'll do h x trigger equals load so that it only gets triggered as soon as the page is loaded. And then in the h x get is just going to be a list of all the ids. So each attribute will have an id, or has an id, like hxdashpoddash, and then the attribute name. And then in our get request we just have all the information that we want to put into those divs. So we go through, we find our listing of, you know, podcast names, we start we go through the list of the div ids, and then we set up for each one h x swap o o b equals true.
Lazarus:We set the ID to the ID that it's going to go into on the page. So eventually there could be, you know, 20, 30 of these, and there's gonna be a single request that calls after the page is loaded, and it's gonna send to each of those the links to the podcast. So that's just kind of a a little example of the kind of ways that you can use, hx swap oob, which I thought was super cool and used immediately.