It's not enough to just be able to dynamically load and swap content. A lot of times, we need to update multiple parts within a single page with a single request. But, HTMX has got us covered. In fact, there are a variety of ways that we can approach this. But in this episode, we're going to look at probably the most straightforward way, using an out-of-band update. So, I want to update our snapshots. Any time that we make a change to our list. So, let's say that we select an invoice. This is an open invoice.

So, let's say that we select an Invoice. This is an open Invoice. So, when we submit this, I want our snapshot data to update. We now technically have 160 open Invoices. And, of course, the amount changed. And since this was approving the Invoice, then our approved count needs to update as well. Now, since we have multiple snapshots, we need to decide how we are actually going to update them. Do we update them individually? Or do we just update all of the snapshots at the same time? I think the latter is a better option.

Or do we just update all of the snapshots at the same time? I think the latter is a better option. Because, really, we want our users to have the most up-to-date information. Especially if multiple people are using it at the same time. So, we'll just update everything. But, we could update each snapshot individually, if we wanted to take that approach. So, what I'm going to do is essentially create a new fragment here. But, I'm not going to create this around the section like I did for the invoice list. And the reason is because our invoice list had this header over here at the side. That was part of the section.

And the reason is because our invoice list had this header over here at the side. That was part of the section. And our snapshots doesn't really have that there. So, it doesn't really make sense to update the entire section. We just need to update the part that has our snapshots. Which is essentially this div element right here. So, let's create this fragment. Let's call it simply snapshots. And then we will need our end fragment directive as well. Now, the type of update that we are going to use is called an out-of-band update.

And then we will need our end fragment directive as well. Now, the type of update that we are going to use is called an out-of-band update. So, the primary update is for our invoice list. You know, that table. That is the primary update. But, anything else is going to be secondary or a side effect or an out-of-band update. Out-of-band is the terminology used with HTMX. So, that's what we are going to do. And we need to tell HTMX that we want to update this out-of-band. We do so with the hx-swap-oob attribute.

And we need to tell HTMX that we want to update this out-of-band. We do so with the hx-swap-oob attribute. And we will set that to true. But, in order for an out-of-band update to work, we also need an ID. So, let's give this an ID of snapshots-container. So, the way that this is going to work is we are now going to be able to generate just a fragment for our snapshots. And that fragment is going to have a div with an ID of snapshots-container. So, when the browser receives that response, HTMX is going to match the IDs of those two elements. One from the response. One that is currently in the browser.

One from the response. One that is currently in the browser. And it's going to swap that content. It's very easy and straightforward. So, now we just need to include that snapshot inside of our controller. So, let's go to our InvoiceController. And we want to work with this showInvoicesByStatus method. Because this is the method that, well, it shows our invoice list. Not only whenever we click on the links here, but whenever we submit these forms, that method is then called to generate the new invoice list. So, here I'm going to create a variable called snapshots.

Not only whenever we click on the links here, but whenever we submit these forms, that method is then called to generate the new invoice list. So, here I'm going to create a variable called snapshots. This is going to contain the content of our snapshots. And I'm going to call the index method. Because our index method here simply returns the view that we need. So, why not just call index. And then we will use the fragment if method. Now, we are already checking if the request is an htmx request. So, let's break that out into a variable. isHtmxRequest.

So, let's break that out into a variable. Is htmx request. And then we will use that variable here. So that if it is, we will include the snapshots fragment. Then we get our invoices. Then we return our view. But we need to check if it is an htmx request. But here we aren't going to return the view here. We're just going to store that resulting content inside of a variable. So that then we will return the response.

We're just going to store that resulting content inside of a variable. So that then we will return the response. And we are going to include the main content and the snapshot content. And if I haven't missed anything, we should be able to see this work in the browser. So, let's refresh here. If we click on these, okay, we see our invoice list. I'm working with the approved invoices. So, let's select this first invoice. Whenever I click on submit, our count should go to 254. And the amount should change as well.

Whenever I click on submit, our count should go to 254. And the amount should change as well. So, let's test it. Sure enough, there we go. Let's go to our open invoices. Let's select one of these. Now, whenever I submit this, the count for both the open invoices and the approved invoices should change. Because by submitting this, I am approving that invoice. And sure enough, all of that data worked. So, we are now updating multiple parts within the page with a single request.

And sure enough, all of that data worked. So, we are now updating multiple parts within the page with a single request. However, let's go to the page for either the openInvoices and the approvedInvoices. So, we see our list. Everything looks great. Everything's fine and dandy until we get to the bottom. Because we are now including the content from our index view. And since this was not an HTMX request, we include everything from the index. We don't want that. So, this means that inside of our showInvoicesByStatus, we need to check if the current URL is the index page.

We don't want that. So, this means that inside of our showInvoicesByStatus, we need to check if the current URL is the index page. And only when we are on the index page do we want to include our snapshot information. Now, I don't have a name for that route. So, let's open up web.php. And let's add a name here. And let's just give it the same name as the view. So, what did I use? I believe it was invoices.index. So, we'll do the same thing.

I believe it was invoices.index. So, we'll do the same thing. Give this name invoices.index. So, we only want to include our snapshots if the route URL is from our invoices.index. Because then we are going to compare that with a header that comes in the request if it is an HTMX request. And that is called hxCurrentURL. So, if this current URL is the same as our route URL, then we want to include our snapshots. So, let's create snapshots as an empty string. Then we will check if the header for the current URL is the same as our route URL. If true, then we don't really need to check if this is an HTMX request because we already know it is.

Then we will check if the header for the current URL is the same as our route URL. If true, then we don't really need to check if this is an HTMX request because we already know it is. Because this header would be included. And then everything else should work okay. Alright, so let's try it out. Let's go back to the browser. Let's refresh. Let's open invoices. So, whenever we submit an open invoice, it is going to approve that invoice. So, let's select two of these.

So, whenever we submit an open invoice, it is going to approve that invoice. So, let's select two of these. So, the count for open invoices should be 153. The count for approved invoices should be 261. And voila, it is. Our snapshots are being updated. And if we go to our open invoice page, let's refresh. If we scroll all the way down, our snapshots are no longer being included there. Now, there is one caveat to this approach. And that is because we are comparing URLs, we need to essentially normalize them.

Now, there is one caveat to this approach. And that is because we are comparing URLs, we need to essentially normalize them. Because what happens if I add a trailing slash here? So that it's invoices/. Just a minor change, but if we load our open invoices, if we select one of these and then submit, we will see that our list still updated, but our snapshots didn't. That's because now the current URL has a trailing slash as opposed to the route URL does not. However, let's go back to the browser. Let's get rid of the slash. Let's open up the developer tools.

Let's get rid of the slash. Let's open up the developer tools. Because I want to see if there are any other headers that we could use here. So, let's make our requests. Let's submit the form. And I don't think there's going to be, but it doesn't hurt to check. So, let's scroll down to request headers. And we can see that we have HX-Current-URL, HX-Request, HX-Target, and HX-Trigger. I was hoping that there might have been an out of band header, but unfortunately there is not. Now, this wouldn't necessarily work in our case, but it could work in other cases.

I was hoping that there might have been an out of band header, but unfortunately there is not. Now, this wouldn't necessarily work in our case, but it could work in other cases. If we go and look at our list view, here where we are setting up the request that's going to be made, we could set a custom header. So, that inside of the controller we could check if that custom header was there, and then we could include our snapshots. The reason why that wouldn't work in this particular case is because I have that requirement that the invoice lists be workable both on the index view as well as their own individual pages. So, if I hadn't put that arbitrary requirement on myself, then this might be an approach to take. But as I mentioned at the beginning of this episode,

So, if I hadn't put that arbitrary requirement on myself, then this might be an approach to take. But as I mentioned at the beginning of this episode, HTMX gives us a variety of ways to update multiple parts within a single page. They just require a little bit of extra work. Now, if we look at our show invoices by status, this has become, I'm not going to say unruly. It's not something that I would prefer to write. I would like this to be a little cleaner. And I think we can accomplish that with a custom request and a custom response, which we will look at in the next episode.

which we will look at in the next episode.