HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Exploring the examples on
Lecture: Example: Bulk update

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Okay, final example, let's look at bulk update. What does that mean? Let's see it in action, then we'll talk about the pieces.
0:08 So here we have a table of users and they have a status and really what we want to edit is their status. Are they either inactive or they're active?
0:18 And let's suppose that Joe and Fuqua, they now need to be deactivated or set to be inactive. We're going to highlight them in their checkbox, hit this.
0:27 a cool little UI feedback that notices those changed and then they were made inactive. Let's actually activate these two down here at the bottom so the
0:38 bottom three will be activated and there they go. They're back active. So if you
0:43 want to make changes to all of them, right, this big group here, maybe I need
0:47 to delete these three or move them or who knows what we're doing, what we can do is we can add a button for each behavior and these go to different
0:57 endpoints on the server or we could pass a query string that says set new state
1:01 to active or inactive or whatever. And then we just re-render, re-determine this
1:08 entire table whether or not they're active or not. Okay so come down here and
1:13 look at this. So we're going to say we're going to work on checked the thing with
1:19 ID checked contacts, that's this form. What you have to do is you have a form that contains a
1:24 table and each table row has a checkbox. Initially, it's unchecked. And then that's pretty much it,
1:31 what we're going to say over here is the target is going to be to replace the body.
1:36 And if you click the activate, it's going to post something to slash activate. And if you
1:42 click deactivate, it's going to click post something over to deactivate. And then there's There's some CSS transitions to make those red things happen.
1:52 And let's look at what happened when I clicked it. So it started out with just the table. Again, you're not going to see the whole thing, right?
1:58 It gets truncated here. But you're going to see this table coming in as we saw. And then we click deactivate.
2:05 It does a put to deactivate and it passes over the IDs that we checked. Those were the first one and the third one, zero and two on index base zero.
2:16 And then we reactivated the last two, that should be 0, 1, 2, and 3. So here we go, the IDs that were selected to reactivate were 2 and 3.
2:27 And notice down here each time we've got Joe and Angie and more stuff for activate and deactivate. That part is not changing.
2:35 The reason is it returns the entire table up to the server, it basically makes a change
2:41 and then it regenerates the whole table and sends it back on each request and gets dropped into the T body there. All right, that's bulk update.
2:49 And our final example that we're going to look at. Hopefully this looking at the way these are exchanged, look at the way HTML works, you
2:56 both get a bigger appreciation for the types of things that it can do, and a little bit better intuition on how it's working.
3:04 After this, we're going to go and actually write code to make these things happen both
3:08 on the client side, which we've been exploring, but I've said the server side is easy and Stuff happens there, but you haven't seen any of that yet.
3:15 Well, we're gonna do that in Flask as well.

Talk Python's Mastodon Michael Kennedy's Mastodon