HTMX + Flask: 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 and then we'll talk about the pieces.
0:07
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:17
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.
0:26
Hit this. There's a cool little UI feedback that notices those changed, and then they were made Inactive. Let's actually activate these two down here,
0:37
at bottom, so the bottom three will be activated. And there they go, they're back active. So if you want to make changes to all of them,
0:45
right? This big group here, maybe I need to delete these three, or move them or who knows what we're doing.
0:51
What we can do is we can add a button for each behavior, and these go to different endpoints on the server,
0:58
or we could pass a query string that says set new state to Active or Inactive,
1:03
or whatever, and then we just re-render or re-determine this entire table whether or not they're active or not. Okay,
1:11
so come down here and look at this. So we're going to say, we're going to work on checked, the thing with id checked-contacts. That's this form.
1:22
What you have to do is you have a form that contains a table, and each table row has a checkbox.
1:28
Initially it's unchecked and then that's pretty much it. What we're going to say over here is the target is going to be to replace the body.
1:37
And if you click the activate, it's going to post something to /activate. And if you deactivate, it's gonna click, POST something over to deactivate.
1:47
And then there's some CSS transitions to make those red things happen. And let's look at what happened when I clicked it.
1:53
So it started out with just the table. Again, you're not going to see the whole thing,
1:57
right? 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 3rd one, zero and two on index based zero.
2:15
And then we reactivated the last two, that should be 0, 1, 2, 3. So, here we go. The ids that were selected to reactivate were 2 and 3
2:26
and notice down here each time we've got Joe and Angie and more stuff for activate
2:31
and deactivate. That part is not changing, the reason is, it returns the entire table
2:39
up to the server. It basically makes a change, and then it regenerates the whole table and sends it back on each request and gets dropped into the
2:46
tbody there. All right, that's "Bulk Update" and our final example that we're going to look at. Hopefully this, looking at the way these are exchanged.
2:54
looking at the way htmx works, you both get a bigger appreciation for the types of things that it can do and
3:00
a little bit better intuition on how it's working. After this, we're going to go and actually write code to make these things happen,
3:08
both on the client-side, which we've been exploring. But I've said the service-side easy and stuff happens there. But you haven't seen any of that yet.
3:15
Well, we're going to do that in Flask as well.