HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: Introducing Click to edit
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Having that big form at the bottom of the page is kind of ugly. Our goal now is to hide it away until it is needed,
0:08
and that is done with htmx and the hxget attribute. When the page loads, you'll now see a link instead of the form,
0:17
and clicking that will substitute the form. If you were using Vue or something else to do this,
0:24
your page would need the HTML for both the link and the form, and then a bunch of JavaScript that did the replacement when the link is clicked.
0:31
In the world of HTMX, what you do instead is add special attributes to the link which tell
0:37
HTMX to fetch new content from a URL when the link is clicked. That new content is the form,
0:46
and it needs a view to serve that content. HTMX then replaces the link with the form that comes
0:52
back from the server. Let's go back into PyCharm and try this out.