Django, HTMX and Alpine.js - Modals and Forms

▶ Django & HTMX FULL COURSE: https://www.udemy.com/course/django-htmx-hypermedia-web-apps/?referralCode=8927C26ADA4349CD3928 ▶ HTMX & Django playlist: https://www.youtube.com/playlist?list=PL-2EBeDYMIbSP9TBPMsiMcRdLWeRzz1Gu ☕ Buy a coffee: https://ko-fi.com/bugbytes 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) 𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮: 📖 Blog: https://www.bugbytes.io/posts/ 👾 Github: https://github.com/bugbytes-io/ 📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻: TailwindCSS modal: https://flowbite.com/docs/components/modal/ Alpine.js docs: https://alpinejs.dev/start-here Alpine modifiers: https://alpinejs.dev/directives/on#modifiers #django #alpinejs #python #tailwindcss