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.

Talk Python's Mastodon Michael Kennedy's Mastodon