HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 4: Integrating with front-end frameworks
Lecture: The about partial and modal HTML
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
I'll start by creating the partial for the popup modal. There's a lot going on here, especially considering it just displays two measly lines
0:16
of info to the user. But that's Bootstrap. It's divs all the way down. There isn't anything htmx specific here.
0:24
I'm simply keeping the modal dialog in its own template file for future rendering as a partial. Now I'm going to add the triggering code to Base.html.
0:34
I'm going to scroll down to the navbar. This is the new item on the navbar.
0:47
It consists of a little info icon and when clicked fetches the about box dynamically. It uses both HTMX and Bootstrap attributes.
1:01
The HXTRIGGER attribute uses the click event, which I haven't shown you before, but as you might guess, this fires when the link is clicked.
1:10
When it fires, HXGET fetches the new content, and uses HXTARGET to replace that div. This is the placeholder. The action doesn't stop there, though.
1:28
HTMX passes the event down to Bootstrap, so Bootstrap sees that it's a modal, and because it was clicked, launches the dialog box.
1:38
Let me scroll down just a bit here, and I'll insert the placeholder. This is a simplified version of a modal box.
1:52
It's as small as I can get it so that Bootstrap doesn't barf when the page loads.
1:57
When htmx gets the click event, this chunk gets replaced by the dynamic content.
2:04
For a single dialog box, this is probably overkill, especially as the content being rendered is static.
2:10
But if you want the dialog to have dynamic content, or if you've got a lot of dialog boxes, this would simplify the amount of HTML you needed.
2:18
There's a bit of doubling up as you can't completely get rid of the modal, the placeholder
2:23
has to be there, but with the right code you could get away with one of these rather than one for each dialog box.
2:31
Let's add the view to make this work.