Modal forms with Django+HTMX

Video Description

This video shows how to use HTMX to show Django forms in modal dialog boxes. The solution presented here requires very few JavaScript lines, renders form errors nicely, and refreshes the main page on success. The following blog post contains a condensed version of this video: https://blog.benoitblanchon.fr/django-htmx-modal-form/ The following GitHub repository contains a complete project demonstrating the technique: https://github.com/bblanchon/django-htmx-modal-form See also the follow-up video that shows how to display a toast: https://youtu.be/pAtrj8A-Kl4 Contact me on Codementor for live 1:1 mentoring: https://www.codementor.io/@bblanchon Table of Contents: 00:00 - Introduction 01:26 - Presentation of the original project 03:30 - Tour of the initial code 08:18 - import HTMX's JavaScript 08:53 - Lazy load movie list 15:53 - Add a placeholder for the dialog 17:40 - Change form's CSS 19:11 - Move the form 21:52 - Show the dialog 28:06 - FIx dialog's Cancel button 29:24 - Perform POST request with HTMX 31:52 - Return an empty response on success 34:29 - Hide the dialog 42:01 - Update movie list on success 45:25 - Reset the dialog's content 50:28 - Support status 200 52:58 - Recap