Modal forms with Django+HTMX

Benoit Blanchon February 18, 2022
Video Thumbnail
Benoit Blanchon Logo

Benoit Blanchon

View Channel

About

No channel description available.

Latest Posts

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

You May Also Like

Transform Your Space Today

AI-recommended products based on this video