Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
Alright. So we've basically wrapped up season 3, which was all the headers. And kinda like the other seasons, I'd like to go through and just give a recap of everything that was involved. So the headers, the HTMLX headers are grouped into 2 different categories, the request headers and the response headers. So the request headers are what you send from your client back to the server.
Lazarus:Those those are the headers that go along with the request from the client to the server. And you can set those, in your in your attributes, you can there's a special way to set those request headers, And then the response headers are set on the server side in whatever language you're using on the back end. You have access to your headers for the response that you send back. So you can set those response headers in there. So those are the 2 big big categories.
Lazarus:For the request headers, that was sort of what we did first. The request headers the first category within that is just the flags, and these are things that are just like on or off. So h x boosted is just tells you whether it was a boosted link. So a link that has h x boost equals true on it. That way you can just check and know whether that was, you know, the request that's coming in is from an h x boost request.
Lazarus:The next one is h x request. This is also just kind of a flag. So if it's an h t m x request then that h x request is going to get set automatically and sent along with your request headers. And these are not request headers that you are setting, they're just ones that get set from, you know, from the actions that are that are happening. So actually that's true of all these request headers.
Lazarus:These request headers, you're not setting them yourself. You probably can if you want to, but they're just kind of automatically added to the request so that you have some context for the requests, for the requests that are coming in. Okay. So flags, h x boosted, h x request, and then h x history restore request. So this is an unusual case.
Lazarus:Basically you want to check. So for instance, there are certain pages, let's say that you have a page and you've set the URL up top. So you've added you've loaded a little partial, but you've also set the URL. When you refresh, you need to know whether it was an HTMLX request or not, or if it's a full page refresh. So that's where that HX request header comes in.
Lazarus:That lets you check if it was an HTML request. But the special case is if you're using the back button, then HTML is going to do a history restore sometimes. If if it doesn't have the full information within the back button, it is going to need to call and do a full page refresh. But that is an HTMLX request. And so this is very esoteric.
Lazarus:You're not going to come across this very much, but if you're dealing with the back button and browsers and back and forth, then the basic idea is that you need to check for not just the HX request to see if it was an HTML request, also check the header for HX history of restore request. And if it is a history of restore request, you've got to send the full HTML back. Okay? So it's it's if you're using the back button and the forward button, and you that's the option that is to send back the full HTML. Okay.
Lazarus:So then there's some other ones that are not just flags. They're not just kind of on and off. There's some variables that are sent. So these are more request headers. H x current URL just says what the current URL is that the page is at.
Lazarus:That could be very useful. Okay. Hx target request header is another variable to send. That's the ID of the target, if it has an ID. So that's, you know, where this is going to go.
Lazarus:And then then we have hx trigger and hx trigger name. So those are the ID, if it has an ID, of the element that triggered the HTMLX request, and h x trigger name is if that element is an input it's the name of that input. So those are all these sort of variables that are sent along. So that's h x current URL, h x target, h x trigger name, and h x trigger. And then the there's one last category, which is the user variables, there's only one in here, and that's HX prompt.
Lazarus:So if you set an HX prompt and you prompt the user to type something in and then hit enter, that value that they typed in is going to be passed in through a request header of h x prompt, and so you'll have access to what they typed and what their response was to that h x prompt. Okay. So that's all the request headers. Next are the response headers. We covered all these.
Lazarus:First category is browser and history commands. Okay, so HX location. This is going to set a location for the page to go to, and HTMLX is going to treat that as if it were an HX boost. So it's not going to reload the full page and take you to that location. It's going to, you know, do the HX boost thing which is to, make an ajax call to that location, get the html back, and swap out with the page and update the URL.
Lazarus:So it'll treat it exactly like an HX boost if you send that HX location response header. The next one is HX redirect. So this is just like a regular redirect. This will reload the whole page, but it'll, you know, direct you to the URL that you want to go, and then, you know, refresh the page from there. Then HX refresh, that's just refreshing the current page you're on.
Lazarus:Hx push URL, so this pushes a certain URL that you set up to the top bar. So that's your new URL of your page. And then a check's replace URL replaces the URL in the top bar. So rather than adding a new history item and adding it to the stack, which is the push URL, Replace URL takes the current one and replaces it. And those are that's functionality that you also have access to in the attributes, but these are response headers, so you can set these, just from the server side without having anything on the client side, and push that URL or replace that URL.
Lazarus:Okay. Next are the override attributes. So if you're over so these are response headers that override attributes that are normally in HTMLX. So we have h x reswap, which overrides or sets the h x swap value. We have h x retarget, which does the same for the h x target value.
Lazarus:And then we have h x reselect. So this sets the h x select value. So HX swap, HX target and HX select are all, kind of, very standard HTMLX, attributes that you can use. Swap tells you how you replace the HTML on an element. Is it the outer, the inner, the after, before, begin, end?
Lazarus:There's lots of different options for how you swap out that HTML. H x target is where you swap out that HTML. What's the target place that you're putting this? And then HX select takes all the HTML that you have and you can select with a CSS selector, just like HX target. You select with a CSS selector, which part of the response you want to use.
Lazarus:So these these override these response headers let you override. So instead of HX swap, it's HX reswap, retarget, reselect, and you can override the values, or add. If if there was no values there before, you can just add in new values. So this gives you these 3 give you a lot of the power, that you normally have with HTMX, but just strictly from the server side you can use swap, target and select to, you know, place data where you want to on the page. To make an override, let's say there's an error and you want to override everything and send it to an error page.
Lazarus:This is one way to do that. So those are all the overriding of the attributes, response headers. The last category of response headers is to trigger events. So you can, from your back end, from your server, trigger particular events in your client, on the JavaScript. So HX trigger will trigger an event on the client immediately.
Lazarus:So HX trigger equals, and you put the event name. HX trigger after swap is going to trigger an event after it swaps in the HTML. So first it swaps the HTML in as normal, and then it triggers the event. And then HX trigger after settle is, you know, the next in that life cycle of the request. After everything's settled, after, you know, it's been one tick after and things are in place and maybe something else is run, then it's going to trigger the event that you passed.
Lazarus:So either way, you're doing the same thing. You're passing an event name. And that event name could be any event that's defined. It could be an h t m x event, Could be just a random browser event. It could be an alert.
Lazarus:It could be a console log. You know, whatever your events are. And you can create your own events. You know, if you if you're familiar with JavaScript and creating your own events, you can create your own events and then trigger them using this h x trigger response header. So okay.
Lazarus:So that is everything we've gone over for season 3, the request headers and the response headers. Both of these, I've kind of categorized and said a bunch of times, you may never ever use these. I think the most likely one that you would use is the AJAX request. And that is just on your server side, this is a request header, On your server side, you check to see if the request, the AJAX request coming in is an HTML request, because there's a lot of different things you might want to do in that situation. Like, for instance, either return a partial or return a full page.
Lazarus:So that's the most likely. The rest of these are just tools in your toolbox. You can use them as needed, and you may never need them. But they are there. And a lot of them are just automated.
Lazarus:They're just happening behind the scenes. Every time you use h t m x these headers are being sent back and forth. And you can override. You can use them. You can check them, to do lots of different stuff.
Lazarus:So just something that gives you a little extra control, a little extra power. And that's, that's the end of the request headers, or the end of the headers, the request and the response headers. I think next I'm going to start doing some I had, like, a you know, I mentioned I was on I was at the Big Sky Dev Con and ended up talking to some people there. And my I think the next thing I'm going to do on here is try to have some conversations with, different people in the HTMX community. So, I hope you to, enjoy the headers and we'll stick around for maybe some, some conversations.