HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Exploring the examples on htmx.org
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.