Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
Alright. So we've been going over the response headers, and this is now the last one or really the last three. So the last three response headers here are HX trigger, HX trigger after swap, and HX trigger after settle. And these are all very powerful headers. Basically, they let you run they let you trigger events on the client side in your response.
Lazarus:So you you say which ones, and and the 3 different ones, I'm including them all together because they all do the same thing, they just trigger events, but they do it at different timing markers. We can get into that later, but, you know, there's the life cycle of a request and how it replaces the the HTML into the dom. There's different parts of that life cycle, and these 3 all do the same thing, they just trigger it at different parts of that life cycle in the request. So, okay, so what do they do? They let you push an event that gets triggered by your client, by your front end.
Lazarus:So what kind of events? Any events. So not just h h t m x events. You can have your own custom events that you defined in your JavaScript somewhere. You can have 3rd party plugins, you know, like the the select 2 or the I don't know, there's a million little third party javascript plugins that you want to, you know, let's say the codeprettier one, so you want to make sure that your, your code gets sort of formatted correctly after you send in a snippet of HTML.
Lazarus:You want to make sure that it triggers something somewhere else that looks at your your new HTML, your new DOM, and trigger, you know, run some sort of piece of code in your javascript based on that event. So you can put those events in and trigger them with the hx trigger response header. So it's a way to kind of send that information to your client, to your front end, and, not only can you send which events to trigger, you can also push data along with those events. So to push the data you would send it in a JSON array. So there's a couple different ways you can use HX trigger.
Lazarus:The first is just HX trigger colon, you know, this is in your response header, what header you're setting, HX trigger colon event, and whatever your event name is, event name. So you can just, like, trigger an event. As soon as the response is received, that event gets triggered, Something happens on your client side, something happens on your front end. Okay. So you could also trigger 2 events or multiple events, as many events as you want.
Lazarus:You could have a chain of events that get triggered, event 1, event 2. So h x trigger colon event 1, event 2, separated by a comma. Right? Okay. So you also have the ability to, send information along with your event.
Lazarus:So if you put that into a JSON array, so you do h x trigger colon, and then you have a JSON array, the event the name of the event is the key, and then you put a value for your event. So message, you know, the name of your event could be like, alert message, and then the value would be what your alert message is. And then on your JavaScript side you've got some event handler that's listening for that event, checks the message, so it would look in your in your headers, in your, not the headers, but it would look in the event details. So every event, you know, has details along with it, so details dot value would give you the stuff that you put into your h x trigger, along with that event. So that's sort of the, you know, 2 that's a couple ways.
Lazarus:You can do just the event by itself, you can do it with commas and do a multiple, you can do the JSON array. You can even get more complex with these JSON arrays, so if you have an event and you want to send a bunch of data along with it you can say, you know, hx trigger colon and then JSON array with the key of each event, and then inside the value you put another JSON array with a key value pair of your, you know, your variable name and your and your value for that. So, very flexible, and then you can do that with multiple too. So your JSON array can have event 1 with a bunch of JSON array values, event 2 with a bunch of JSON array values, so you're passing whatever data you need on your front end through these variables. Okay, so the the other big thing here is we have h x trigger, which is sort of what I've been talking about, but the other 2 that I'm including here are the h x trigger after settle and h x trigger after swap.
Lazarus:So swap versus settle versus just on its own. If you do it just on its own, HX trigger, it will it will run it will trigger the event as soon as the response is received. So before it's done anything else, it's just gonna trigger the event and that's gonna happen. Right? Whatever that event handler does, it's gonna do.
Lazarus:That may not be ideal because so h x swap so h x trigger swap, after I'm sorry. H x trigger after swap, lets you tap into after the data has been updated. So you may not want to trigger an event right away. You may want to first put what needs to go in into the dom and then trigger the event. So that's after it swaps it in.
Lazarus:Then you have the hx trigger after settle. So that's after not only has it been swapped into the dom, it's also settled into the dom, it's it has been sort of processed in another way and accepted, and so then, you know, that might be the one you would use if you're say, then triggering a third party JavaScript plugin or something like that. Because now your JavaScript plugin can look and see, okay, the dom is complete. It's settled, everything is all set, so now the code that is supposed to run can actually work there. So, you know, by default, h x trigger, it just runs right away, goes through the life cycle, there's swap, and then the settle.
Lazarus:So depending where you want to put it, and that'll depend on, you know, that specific event and what the purpose of that event is, you may want to use these different ones. But essentially they're all doing the same thing, they all use the same format. It's probably worth doing an episode here on just the life cycle here, because I think that's interesting, and you know why you might use each. Main thing is just you can imagine you'd want to wait until stuff is in the dom. So that's when you'd use the settled, hx triggers settle, after settle, or after swap, and a lot of that stuff is the third party events, like a select plugin, And but, you know, if you're creating your own events, you can sort of figure out where in that life cycle you want to trigger it.
Lazarus:But they're actually you know, these are this is very useful. This h x trigger after settle, after swap, and just h x trigger on its own if you are using events. And, I'll just, like, put my own little 2¢ in here. You know, I don't use a lot of of events. Maybe I do in that like you have click and you know, those are all events.
Lazarus:But in terms of, you know, writing my own events and this kind of stuff, I'll just I don't use a lot, and I think part of that is it can make it a little more difficult in my opinion to figure out where your code is, what is triggering what, you know, if you have all these listeners, the path of the code gets a little bit convoluted, or it can. You know, everyone's different in how they sort of organize their code. But it's just something to be a little bit I think you have to be a little bit careful when you start using a lot of events. But if you know what you're doing, if you're comfortable with events, if you love doing doing some JavaScript events, and you can do very cool stuff with it, I have no direction, no no, you know, question about that. It just is something to kind of look out for.
Lazarus:And if you're like me you might use it a little sparingly, but sometimes you really need them. You really, you know, there's no there's no substitute for a client side event in some cases. So this is these h x trigger options, and knowing being able to sort of control where in the life cycle can be a really useful tool. So I guess this is the last response header and just the last header in general. We've gone through every single header that you can send along with the request, you know, the request headers that you send from the client, and the response headers that you send, from the server.
Lazarus:So this is the last one. So the end kind of of, you know, the season 3 or whatever, I've kind of divided these up into seasons. We've gone through every single one at kind of a basic conceptual level. And so what is next? I'm not quite sure what I'm gonna do for the next season, season 4 yet.
Lazarus:Feel free to drop me some feedback, if you want to, you know, if you want to weigh in, and, like, what do you want to hear? You know, that's kind of what I'm right now, I'm kind of this is sort of educational. I'm learning this stuff, I'm researching this stuff, and I'm putting them up here in little bite sized things. So, what do you want to hear? You can reach out to me, h t m x labs on Twitter.
Lazarus:I'm also heading this week to, you know, go on Saturday to the Big Sky DevCon. I've got some friends in Montana. I'm gonna visit them. And I'm pretty excited about I haven't been to a conference in a long time, so I'm looking forward to seeing, you know, Carson Gross and Primagen and some of these other big name javascript folks, which is kind of funny to to have them speaking there. That some of the talks are really funny, like why h t m x sucks, stuff like that.
Lazarus:So I'll probably give a little recap of the conference on here, just because I think some of the talks will be really relevant to, h t m x stuff. You know, it's not exactly an h t m x conference, but it may as well be. It's got like the creator of h t m x and a bunch of talks about it. So, I'm looking forward to it. I think it's gonna be interesting.
Lazarus:Have a good one.