HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: Adding the form to the template
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
In the previous lesson, I walked you through the Video Collector project in its Django-only incarnation.
0:08
In this lesson, I'll show you how to add click-to-edit capabilities to the Category page using HTMLX and the HXGet tag.
0:18
The goal for this lesson is to modify the Category page that lists videos, implementing a form that allows you to add videos to your collection.
0:28
I'll be doing this in two stages. First, building the bits and pieces you need to submit a new video without HTMX.
0:36
I'll be adding a form to the page and the usual form handling code to the view.
0:41
The results of this code can be found in the lesson4a form directory in the repo. Once I've got the form handling in place, I'll convert it to HTMX.
0:53
When you first load the page, instead of a form you'll get an ""Add Video"" link which
0:57
you click to replace with the form. In order to do this, the form needs to be moved into
1:02
its own template. Once all that is in place, I'll show you how to add ""cancel"" functionality
1:08
so you can cause the form to go away and be replaced back with the link once more.
1:14
The final result of this lesson can be found in the lesson4b.htmx directory in the repo.
1:23
This is a screenshot of what I'm aiming for in the first version - a small form at the bottom of the category page using Django-only techniques.
1:32
Let's open up PyCharm and get this going.