https://github.com/bblanchon/django-htmx-modal-form

Django+HTMX modal form
https://github.com/bblanchon/django-htmx-modal-form

Last synced: about 1 month ago
JSON representation

Django+HTMX modal form

• Host: GitHub
• URL: https://github.com/bblanchon/django-htmx-modal-form
• Owner: bblanchon
• Created: 2022-01-30T17:14:12.000Z (almost 3 years ago)
• Default Branch: bootstrap5
• Last Pushed: 2023-03-08T10:39:06.000Z (almost 2 years ago)
• Last Synced: 2024-08-03T17:09:44.115Z (4 months ago)
• Language: Python
• Size: 2.08 MB
• Stars: 94
• Watchers: 6
• Forks: 25
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-htmx - Modal forms with Django+HTMX - A sample project to demonstrates how to show a Django Form in a modal dialog box using HTMX. (Examples by Back-end / Python-based (Django, FastAPI, Flask))

README

        
# Django+HTMX modal form

This project demonstrates how to show a Django Form in a modal dialog box using HTMX.

![A video of the site](django-htmx-modal-form-10-fps.gif)

This branch contains the **Bootstrap 5** version.  

See also the [Bootstrap 4 version](https://github.com/bblanchon/django-htmx-modal-form/tree/bootstrap4) in this repository, or a [Tailwind + Alpine.js version](https://github.com/geoffbeier/django-htmx-modal-form) in @geoffbeier's fork.

There are two additionnal branches that show how to use this technique with the Django messages framework: [with the `HX-Trigger` technique](https://github.com/bblanchon/django-htmx-modal-form/tree/messages-framework) and [with the "OOB swap" technique](https://github.com/bblanchon/django-htmx-modal-form/tree/messages-framework-oob)

Learn more about this technique here:

* [Modal forms with Django+HTMX](https://blog.benoitblanchon.fr/django-htmx-modal-form/) (blog post)

* [Modal forms with Django+HTMX](https://youtu.be/3dyQigrEj8A) (YouTube video)

* [Toasts with Django+HTMX](https://blog.benoitblanchon.fr/django-htmx-toasts/) (blog post)

* [Toasts with Django+HTMX](https://youtu.be/pAtrj8A-Kl4) (YouTube video)

* [Using the Django messages framework with HTMX](https://blog.benoitblanchon.fr/django-htmx-messages-framework/) (blog post)

* [Django+HTMX: integration with the messages framework](https://youtu.be/I5_g7XYyemQ) (YouTube video)

* [Django+HTMX: integration with the messages framework](https://github.com/bblanchon/django-htmx-messages-framework/) (GitHub repository)

To run the demo locally:

```

pipenv install

pipenv run migrate

pipenv run server

```