Django, HTMX and Alpine.js - Modals and Forms
In this video, we will see how to create a modal using TailwindCSS styles, and using Alpine JS to control the modal's visibility using different techniques.
We'll see how to submit a form within the modal using HTMX, and how to display feedback on the page after submission.
Modals are windows that appear on a UI and are designed to draw the user's attention to an important action. We'll show the basics of how to create a modal system with Alpine.
In this video, we'll also show a couple of event modification techniques with Alpine, such as the "outside" modifier on a click event, and the "debounce" modifier.
📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
02:00 Creating a Complaint Model
02:54 Creating a Complaint Form
04:05 Adding Form to View/Template
06:10 Creating an Alpine Component
07:50 Closing Modal with X Button
08:34 Closing Modal on Outside Click
09:57 Rendering Form Class Fields
12:47 Submitting Form with HTMX
16:23 Creating Success/Failure partials
18:28 Adding form validation method
20:44 Closing Modal after Submit (Alpine debounce modifier)
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
https://ko-fi.com/bugbytes
▶️ Full Playlist:
• Alpine.js
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: https://www.bugbytes.io/posts/
👾 Github: https://github.com/bugbytes-io/
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
TailwindCSS modal: https://flowbite.com/docs/components/...
Alpine.js docs: https://alpinejs.dev/start-here
Alpine modifiers: https://alpinejs.dev/directives/on#mo...
#django #alpinejs #python #tailwindcss