The basics: hx-on (htmx 1.x -> 2.0)
So I'm glad I didn't do an HX on episode before because, just today I read that HTMLX 2 is going to be released tomorrow. And as part of the upgrade guide, h x on is mentioned. So there is going to be a change, you know, from today to tomorrow in HX on. It's not actually a big change, because 1.0 it's basically it's it's how you call it. So hxdashon equals was valid in 1.0.
Lazarus:That's no longer going to be the case. It was already deprecated. The correct way to call it is hxdashoncolon and then an event. So an event like click, mouse over, mouse out, custom events, the special HTMX events. So you you can reference these events.
Lazarus:So okay. Stepping back. What is HX on? H x on is a way to run any arbitrary JavaScript code based on any event, which can be the regular built in events, for your browser, regular JavaScript events, or, your own custom events and those those special h t m x events. The h t m x events are like when a request is sent in h t m x, You know, the h x get, h x post, there's different phases of that request being sent.
Lazarus:So you could have before the request, after the request, when the data is loaded. You can see sort of different trigger points, so that if you wanted to say, like, send a message to the user or an alert based on what's happening at the different points, that's when the h t m x events kind of come in there. So but it doesn't have to be h t m x events. It can be any event, and it runs any JavaScript code. So you put that JavaScript code in line.
Lazarus:So this is sort of a very powerful thing to be able to do. It sounds a little bit at first like h x trigger because it deals with events, but the difference is h x trigger, you're just defining what the event is. So hx trigger equals, and you put your event inside that. That's just going to trigger whatever your main, request is. So if you have a get or a post, you're just sort of deciding what's going to trigger that get or post.
Lazarus:So this is different. It's not triggering your get or your post. It is running arbitrary code, running code that you write in line inside the the equals. So the format is hxdashoncolon the event equals the JavaScript code. And if you're using one of the special h t m x, events, you can do h x dash on colon colon, and then you have the h t m x event name.
Lazarus:So that's the sort of difference between 12. 1 allows you to do the equals, but the correct way now, and the only way now in 2.0 is to use that colon with the event. There are some guidelines for how you refer to the event. And these are like guidelines, not HTMLX specific. These are these are from the DOM.
Lazarus:Like the DOM says it has to be lower case. So HTML kind of provides some some translation. So if you had it in camel case before, so like after request with a capital R, if that was your event name. Now you can refer to it in kebab case. So which is lower case with a dash.
Lazarus:So if you had after request, capital R, now it's after dash request, all lower case. So you can look this stuff up, you know, the specifics of how to sort of reference these. But basically it's extremely flexible. I mean this is something it's allowing you to tap into any event in your browser, in JavaScript, in your whole app, and run any JavaScript code based on that event right there in line on there. So what what would you use this for?
Lazarus:One of the small things would be, you know, a mouse over and a mouse out. You could change the color. So you'd run like, just straight JavaScript this dot Yeah. I I don't quite remember, but this dot style dot color equals whatever, or this dot style dot background equals. So you you can change CSS elements directly from this.
Lazarus:A really good use of this is tapping into the HTMLX after request. So let's say you have a form, and you have your form object, and you've got an h x post, which goes to a route. You've got a target, so after it's submitted, here's where the results go. So once that form is done and you've submitted it, you know, you don't want to have all your data still in the form, and you don't necessarily want to have to rely on HTMX replacing that whole form with an empty form. So you can run h x on colon colon after request.
Lazarus:This is tapping into the h t m x after request. If there's a successful request, this will get triggered. And then the JavaScript that it runs is this dot reset, which is a built in JavaScript thing for forms to reset the form. So that's just kind of a really handy use case of that is the h x on after request this reset on a form. So this is an extremely flexible, a flexible way to sort of do things, and the huge benefit, I think, is that whole concept of keeping the code that it's going to run in the place where it's being triggered.
Lazarus:So there's a lot of people who really they dislike inline stuff, and they can explain why that is. But there is this sort of concept of locality of behavior, which probably deserves its own its own episode. But the basic idea is that of keeping the code. This makes it easier to tell what's happening. If you can see right there.
Lazarus:Oh, on this event, it's gonna read almost like English, you know, on this event, and then there's a little snippet of JavaScript that runs. It is a very powerful tool, so just remember that with great power comes great responsibility.
