Advanced htmx: hx-sync
So some attributes you're gonna use every time in every project. And most of those, a lot of those are in the basics last season. This time, you know, we're talking about the advanced ones. And some of the advanced attributes you might never use, could probably never use, and you'd be fine. And h x sync is one of those, I think.
Lazarus:It it's for the fine grained uses, where you are really digging into the details. So HX sync lets you decide which Ajax requests are gonna get priority. Which order they happen in, which ones replace others. So first off, I mean, Ajax is by design asynchronous, so it's not waiting. When the request gets fired off or multiple requests get fired off for different reasons, they could be, you know, triggered on different events.
Lazarus:You could be tabbing through a form. It could be hitting the submit button. It could be clicking on stuff. Lots of reasons requests would happen. It's what HTMLX is all about.
Lazarus:You can make these requests happen from anywhere, in any format you want, based on any trigger, any event. But the computer, and your browser, and the whole JavaScript process, the page is not locked up while it waits for the response from the server. Everything's asynchronous. That all makes sense. So you could fire off, you know, 10 of these, 10 requests right away, and and maybe your code does this on purpose, maybe it does it by accident, but how do you know what order they're gonna come back in?
Lazarus:You know, these are requests that are sent to the server, and the server is gonna process them. Servers have very complex decision making trees and processes and queues on how they process data. So what happens if they don't come back in the order you expect? If they both, let's say you have a bunch of requests and some of them update the same targets. Generally, they're all fast, you know, that's part of what everybody's working for.
Lazarus:They try to make these requests fast, and they're generally gonna just work and return in the order you requested them. You know, you can have a little loading indicator if you think it's going to take a while. But there are reasons why network requests could take longer. Some could take much longer than others. So even if they return in the order, you might want a particular one to take priority over another.
Lazarus:So AJAX sync lets you fine tune your Ajax request priority and order when there are multiple elements making requests at the same time. It uses, a few keyword commands mixed with the CSS selectors, which is what, a lot of different attributes use as the CSS selectors, so you can target different places on the page, And you can target specific other elements that are also so other elements that are making requests. So you can say, a specific element should override or replace, or abort. So let's let's use an example. Let's use the example of a form.
Lazarus:So a form, it's got several inputs. It's let's just do, like, you know, it's got a name and an address and an email, and we need to verify, for example, that the address is a legitimate address. Okay. So on the change for that chain the change field, it's it's going to send, an a checks get of a validation of that input to the server, just as a route that checks to see if that's valid, and, you know, returns a little a little message, like a little check mark or something like that if it is. But let's say that changed.
Lazarus:So so, you know, this is only just not triggered while you type because you just need to be able to type in your address first. So it's triggered on change, so that input changes. What if that change was triggered by the form being submitted? Right? So this form submission goes at the same time as the validation request.
Lazarus:So which one should be sent? Should they both go? By default, they're both gonna be sent. But this could lead to some unexpected or almost or meaningless behavior. Right?
Lazarus:Because maybe your form updates the whole page and or maybe your form sends something and then it clears the form out, and then you get your validation back, and you've got a little check mark next to an empty address. Right? That's a little weird. So you might want to be able to decide what happens in that situation. So if you want the form submission to be the top priority, then you can put the abort option on the input.
Lazarus:So a so you on the input, the address input, you add along with the h x get for what the validation route is, h x sync equals, and then you use your CSS selector, closest form, colon, abort. And that is going to take a look at that closest form, and whatever request happens there, if a re if a request comes from that place, it's going to abort the request from the element that the HX sync was put on. So on that validation, it's going to abort it. So, okay. So that's probably what the default would be.
Lazarus:But what if you actually need that validation to happen, and you don't want to allow them to submit the form? You wanna cancel that submit. There's probably a couple different ways to do this. So HX sync maybe is not the first tool you'd reach for, but let's say you that's what you wanted. You did not want when there's 2 requests going out, you wanted the validation to take priority.
Lazarus:In that case, you could do HX sync. This is still you put this on the validation input. HX sync equals closest form colon drop, and that is going to drop the form submission. Right? So drop and a board are a little bit similar sounding, but, you know, that's just sort of the thing I, in my opinion, just kinda gotta look up.
Lazarus:So abort is to abort your current one, and drop is to drop the one that you're targeting. So let's just say another option would be to just you want the submit to kill all other requests. So you don't want to have to say, oh, well, when I submit I need to put on every single input. Okay. I need to drop and drop and drop or abort abort abort for each one.
Lazarus:You know, you you just know. Okay, when I submit this form, it should be the only request that is being sent. So in that case, you can put on the form tag, where it has its HX post. You can put on the form tag, HX sync equals this replace, And this that is going to replace all other requests that are part of this, you know, it goes it's not all requests on the page, it's all requests that are within this. So it's going to replace those requests, and it is going to return, you know, your form submission.
Lazarus:And this you can get even more detailed with this, you know, besides the CSS selector that kind of points at stuff and the different replace, drop, abort options, there's also a queue option. So if you want to really be able to say, just add this to a queue, and you want to keep that order preserved, so that not only is, you know, the browser keeping track of the order or not keeping track of it, you know, it just goes and it makes a request and it comes back. If you want to keep that queue preserved you can add the queue option, and you can just there's a couple different options within the queue option. So you can say first or, last or just to queue all of them. So, you know, basically this is if a request is already out there, then you can add to you can keep the other requests that are made, so people start clicking on other stuff.
Lazarus:Those are put into the queue and they are not run until the other request is finished. And then you can sort of decide how you want that queue, whether you want it to be added to the top, or the bottom, you know, first or last, or or just to queue everything there. So, like I said, these are not the kind of things you are usually gonna have to worry about. I would probably just completely ignore HX sync until I had some really sensitive section of the page. It's getting complicated.
Lazarus:It's starting to return unexpected results or requests that are coming back out of order. A lookup might be an example of that. Lookups are kind of notorious, you need quick feedback, and sometimes your lookups can be different speeds depending on how your server's feeling that day. Or sometimes you look up for one letter, you type a. You know, if you have a lookup on a database and you're looking for the letter a, that might take a lot longer than if you have 3 letters.
Lazarus:And so, yeah, first thing could come in after the the results. Your responses could come in out of order. So there are definitely reasons, and it's just kind of this stuff can happen anytime you're using Ajax. It's not specific to HTMLX. So even if you don't use it right away, this h x sync, just you can just file it away as something that h t m x gives you a special way to fine tune your request orders if you ever need to.
Lazarus:You know, a quick h x sync this this replace. So that's the one that just kind of says, okay. Whatever else is happening, this is now the most important one. That little just adding that to some place on your site, maybe a submit button, that might save you a nice couple hours of debugging someday. Some user could have a slow network, and they're telling you about a bug and you can't recreate it, and a lot of times these are the weird things.
Lazarus:Anytime you're doing stuff that's asynchronous you're gonna get these little weird things like this. So this is like a little just a toolbox. It's another tool in your belt. It's another brick in the wall.
