Chapter: Exploring the examples on htmx.org
Lecture: Example: Bulk update
0:00 Okay, final example. Let's look at "Bulk Update".
0:03 What does that mean? Let's see it in action and then we'll talk about the pieces.
0:06 So here we have a table of users, and they have a status and really
0:12 what we want to edit is their status.
0:13 Are they either Inactive or they're Active.
0:16 And let's suppose that Joe and Fuqua, they now need to be deactivated or set to
0:22 be Inactive. We're going to highlight them in their checkbox.
0:25 Hit this. There's a cool little UI feedback that notices those changed, and then they
0:30 were made Inactive. Let's actually activate these two down here,
0:36 at bottom, so the bottom three will be activated. And there they go, they're back active.
0:40 So if you want to make changes to all of them,
0:44 right? This big group here,
0:46 maybe I need to delete these three, or move them or who knows what we're doing.
0:50 What we can do is we can add a button for each behavior, and these
0:55 go to different endpoints on the server,
0:57 or we could pass a query string that says set new state to Active or Inactive,
1:02 or whatever, and then we just re-render or re-determine this entire table whether or
1:09 not they're active or not. Okay,
1:10 so come down here and look at this.
1:12 So we're going to say, we're going to work on checked, the thing with
1:18 id checked-contacts. That's this form.
1:21 What you have to do is you have a form that contains a table, and each
1:24 table row has a checkbox.
1:27 Initially it's unchecked and then that's pretty much it. What we're going to say over here
1:32 is the target is going to be to replace the body.
1:36 And if you click the activate,
1:38 it's going to post something to /activate.
1:40 And if you deactivate, it's gonna click, POST something over to deactivate.
1:46 And then there's some CSS transitions to make those red things happen.
1:50 And let's look at what happened when I clicked it.
1:52 So it started out with just the table. Again,
1:55 you're not going to see the whole thing,
1:56 right? It gets truncated here, but you're going to see this table coming in as
2:01 we saw. And then, we click deactivate.
2:04 It does a PUT to deactivate, and it passes over the ids
2:07 that we checked.
2:09 Those were the first one and the 3rd one, zero and two on index based zero.
2:14 And then we reactivated the last two, that should be 0, 1, 2, 3.
2:20 So, here we go. The ids that were selected to reactivate were 2 and 3
2:25 and notice down here each time we've got Joe and Angie and more stuff for activate
2:30 and deactivate. That part is not changing, the reason is, it returns the entire table
2:38 up to the server. It basically makes a change, and then it regenerates the whole
2:41 table and sends it back on each request and gets dropped into the
2:45 tbody there. All right, that's "Bulk Update" and our final example that we're going
2:49 to look at. Hopefully this,
2:51 looking at the way these are exchanged.
2:53 looking at the way htmx works,
2:54 you both get a bigger appreciation for the types of things that it can do and
2:59 a little bit better intuition on how it's working. After this,
3:04 we're going to go and actually write code to make these things happen,
3:07 both on the client-side, which we've been exploring.
3:09 But I've said the service-side easy and stuff happens there.
3:12 But you haven't seen any of that yet.
3:14 Well, we're going to do that in Flask as well.