Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So when we're talking about HTMX basics, you know, this h x get and h x target, we're sort of in the last episode, to to send AJAX requests and to figure out where to put the data. The one that starts to really make it feel where you start to feel the, you know, HTMLX magic, where it really starts to feel like tailwind for JavaScript is h x trigger. Because h x trigger gives you access to all of those kind of JavaScript events that usually you just don't, you know, you think of those as front end only as someone who develops stuff, you know, primarily on the back end and you're working out how the HTML is gonna look, what the layout's gonna be, the database, all the models, and everything like that, you're not always able to sort of focus on some of the front end stuff, or you're a front end developer and you're using h t m x now and and you're used to using all this stuff, but, you've always sort of had to either use a framework or you have to go in and write the JavaScript yourself. So what are those kind of events?
Lazarus:So the default event, if you just leave HX trigger off is click, at least, you know, for most items like a button. It does actually have different, different defaults for different items in ways that make sense. But yeah, for most the h x trigger by default is a click. But you can change that and you can do h x trigger equals click to specify that it's going to be a click, so you look at it and you know, okay, when I click this. But there's a bunch of other ones, change.
Lazarus:So a checks trigger equals change. So this is for an input if the input changes, you You know, you use to do that. You can do, like, the on change equals or something like that. You can do you sort of could do that before in line with JavaScript, but just keep going. You have double click, dbl click, h x trigger equals dbl click if you want to double click something.
Lazarus:Key up. So you can do key up and this can be on the event if you want to say key up for, let's say, an entire page. So you just press l, you know, you can have that, you can set a target for the key up and you can set from the body of the thing. So you can do key up, you can do key down, and you can set which key it is. So you could set even the special keys, even control and stuff like that.
Lazarus:And then you have the other javascript, the other sort of mouse events, mouse over, mouse out, mouse enter, mouse leave, so that you can do, you know, if you wanna do fancy stuff or pre loading, prefetching, things like that. Focus, blur, so if you're building a complex form and you as you move through the form you want different things to load, different things to happen, h x trigger equals blur. Means when you get out, when you leave that element that's gonna trigger that and then whatever you have on there, your h x get, your h x target, all those things that will be triggered. So this is like unlocking a world of stuff that you can do. H x target equals, or I'm sorry, h r h x trigger equals load, that's when the element is loaded.
Lazarus:So when it first comes up onto the screen, if you want to just, let's say there's a part of the page that you don't want to load at first, you just set h x load equals, you set the target, you set the get, h x get for it, and it will load in after the page loads, it triggers that load and it will load it then. Revealed, it's a very powerful one, h x trigger equals revealed. So as you're scrolling down the page, when it gets to a certain place, as soon as that is visible, then it can trigger, and it will do an h x get, and then it can do the h x target. You know, you can combine these in any different way you want, But revealed is a very powerful one especially for sort of lazy loading and stuff like that. And you can do other stuff with those.
Lazarus:So once you have, you know, that's those are just sort of the main and there's other ones too. You can also set custom events. So you can create your own JavaScript events if you want to, and then use h x trigger equals and name them. And then along with those events you have modifiers, like let's say, you know, one of the obvious ones is you wanna do a debounce in an input. So you can set a delay of 1 second, delay of 500 milliseconds.
Lazarus:So Or you key up key up delay, so h x trigger equals key up, you know, that's how you would do sort of a standard debounce. So there's all kinds of different things you can mix and match with these. And the big thing is that this gives you access to all of the javascript events, and they can be your events, they can be custom events, they can just be all the events that you're used to using in other contexts or that you already use with plain JavaScript. Another one that's, kind of, just a very cool one is the every. So h x trigger equals every, and you could say one second, and then you could put a conditional in there.
Lazarus:And what that does, it's just gonna trigger that every one second. So how would you use that? It's basically polling. So if you have a section of your page that you just want to be live and updated, it's going to poll every one second. You just set the trigger every one second.
Lazarus:You have an h x get and an h x target right there. That's just gonna pull that in every one second or every 10 seconds or whatever it is. You can also add, you know, inline JavaScript to that so you can set some sort of conditional, you know, if you want to to go along with that. But there is just a ton of options here with the h x trigger, and I do think once you start getting into the h x trigger, and seeing what it can do, you can also add multiple, just, you know, put a comma between them, and you can start to mix and match these, and then use, you know, there's some non standard events you can do. There's also all these modifiers, so when something's changed you can throttle, you can say, you know, look for an event but only from this section of the page.
Lazarus:You use a from modifier and a CSS selector. So it just gives you, you know, it's something you kind of have to play with to get a feel for, but just think of h x trigger as this is really, in my opinion, where you start to get that tailwind for JavaScript because it's giving you access to all these things that otherwise, you know, you can go down into the javascript and you can write, you know, on event this and do this and all this kind of stuff but you forget about those. You don't know where they are. You forget which ones. You click something and something pops up and you don't know what it is.
Lazarus:It's like your your path when you separate the events like that it's all over the code and it might be in different files, it might be in the root app file, it might be, you know, in one of your many include files, You know, you don't exactly know what the path for some of that event matching is. When you use h t m x and you put these directly into the HTML, you see where it is. You can just look at it. You're so used to CSS selectors. You could even look at a CSS selector, you know, from colon body.
Lazarus:Okay. So whatever that trigger is, so let's say it's click from colon body, that's kind of a silly one, but any click on the page is gonna trigger that. So you have access to a whole bunch of stuff and you'll see it right where you need to see it. So that's h x trigger. I think next time we'll talk about h x swap, which decides how you put data into different places.