Out-of-Band Updates

[00:00:00]
>> So we can render errors, well, what about success? So now we gotta start thinking about out of band updates, because right now our form replaces itself. So let's go back here and let's think about what we can do down here. Once we have our contacts here, we want to render just the context.

[00:00:19]
I know we're gonna fix the problem of too many contacts, but right now let's just think about the very narrow case of form is good, update contacts. So instead of doing, let's see, what are we doing right here? We do a display, display is the right thing. I think this looks pretty good, except for if we have a success, what's gonna happen?

[00:00:38]
Let's find out what happens if we have a success with our current one. I'm gonna put in a little bracket there, Create Contact. And now what are we getting? What are we getting, why can't I see you? That was strange, Email already exists. Let's just make sure I have everything.

[00:01:03]
Why am I over getting a 500, what the heck's happening here? Let me just make sure, can't evaluate field Contacts. Okay, we're actually having the classic, I didn't update the templates as we talked about earlier. What are we gonna do right here? Let's do the right thing. So right now, I can just simply do, not page, but page Data.

[00:01:22]
Cuz remember we're displaying the contacts. I know again, we probably should have just called the contacts. We're cutting corners, people. We're cutting corners, people. Let's refresh that, and now we do that. And look at this, our form went away and all of our contacts suck. Because why, why did our form go away and why do we have two sets of contacts?

[00:01:40]
>> Replaced itself.
>> Yep, replaced itself. Perfect, all right. So we need to do an out of band update. So I'm gonna jump back over here to my templates. And I'm gonna go down here and let's pull out a contact. So block contact, notice I named this one correctly.

[00:01:57]
I felt pretty adventurous today, maybe a little enterprising. I just felt it was the right move to do right here. So I have this nice little contact that we're gonna put right here. And I'm gonna go template, what is it? contact, perfect. So that should all just work out just to make sure, hit that refresh, we're looking good.

[00:02:15]
And now I'm gonna do what is referred to as an out of band contact. I'm gonna call this, oob-contact. Inside of here, I'm gonna render out a template that is contact. Right here, I need to add two things. I need to add to HTMX that I want this thing to replace some other item on the screen.

[00:02:37]
So I'm gonna go like this, hx-swap- out of band. So this attribute allows you to specify that some content in the response should be swapped into the DOM somewhere else other than the target. So you can kind of imagine that we're almost creating a real-time video game. Based on the user input, we are now updating the display and we're kind of doing this game of how we're doing stuff.

[00:02:58]
So that's kind of how I like to look at it, right? So we're gonna add in a selector, I'm gonna say, contacts. So swap me out to contacts, fantastic. And then also notice that I am just doing a singular contact here. I'm not doing all the contacts. So, let's think about how we can do this in a more singular way.

[00:03:21]
So instead of just doing a swap out of bands right here, let's do a hx or hold on. Let's do, oops. Aah! Let's do, afterbegin, afterbegin will prepend the content before the first child inside the target. And then I'm gonna add an id to it that's contacts. So now I've given it all the information, I want you to target contacts and I want you to swap yourself in at the front of the list, not destroy the list just swap yourself into the front of the list.

[00:03:59]
Pretty fun times, so this is looking kind of neat. So this is called an out of band contact. So if I go here, I'm gonna do this, contact = oopsies. Let's do one of those. We were gonna definitely want that in there. And we're gonna want contact, there we go.

[00:04:20]
And I'm just gonna pass in, contact. And we're gonna do oob-contact. So now let's see what happens here. I'm gonna refresh this, I'm gonna do an aoeu. All right, that already exists. So let's put a 1 inside there. Okay, well it did add it to the front of the list, awesome, but where did our form go?

[00:04:45]
Our form disappeared, what the heck happened there? It's like I already knew, this is a great question, who designed this? It's actually, okay, so does anyone have a guess where the form went? Anybody?
>> There's just no content, replace, it's sending back nothing for the main content.
>> [SOUND] This man is ready right here, you're ready for HTMX.

[00:05:10]
Yes, so we sent back nothing from the server. And we sent back an out of band update. So it said, okay, I see not a band update, I'll take that out of band update. All right, what's the remaining content? Nothing, all right, well my form says replace outer with the contents from the response.

[00:05:27]
You spent nothing or you sent nothing we replace something with nothing, fantastic. So we can easily fix that by just doing one extra render, c.Render. And we can do what is that, form. Now we need a new form data, there we go. Just render it blank, we don't want all the names and everything in there.

[00:05:49]
So absolutely fantastic, we're not gonna do an error check. It's warning me to do an error check. We're really good at this, I mean, I could put in there, look at that. I even have it on low macro just in case, a little quick one. If I just need to throw in an err, or an err, an err, an err.

[00:06:01]
I can just do it really quickly, just I'm so ready, so ready for go right now. So now that we've done that, when I refresh it and I put in aoeu1 or plus sign, why not. It will add it to the front and then give us a new form.

[00:06:16]
So when we look at the response, what do we get here? We get the following, we get our main content and we get our out of bands updates somewhere else within the web application. All right, all right, all right it's kind of neat, right? Is it kind of neat, do we got some thumbs up, thumbs down, thumbs sideways?

[00:06:34]
One in the chat, if you're really excited about this. Yeah, we got a wall of ones, we're feeling good.
>> A lot of ones in front of math chat too.
>> Okay, I see a couple of not ones not happy about that. But you can't win them all, okay, you can't win them all.