This repository demonstrates how to use Django's messages framework with HTMX.
This branch shows the HX-Trigger technique, you can find the "OOB swap" technique in the oob branch.
pipenv install
pipenv run server
(No need to run migrate since this project doesn't use the database)
Here are the two important pieces of this puzzle:
- HtmxMessageMiddleware takes the messages and puts them in the
HX-Triggerheader - toast.js listens to the
messagesevent and shows the messages as toasts.
📺 See the tutorial on YouTube 📺
📰 Read the article on my blog 📰
- Run
pip install git+https://github.com/bblanchon/django-htmx-messages-framework.git@hx-triggerto install the package - Add
htmx_messagesto theINSTALLED_APPSsetting - Add
htmx_messages.middleware.HtmxMessageMiddlewareto theMIDDLEWAREsettings - Add
{% include 'toasts.html' %}near the end of<body> - Add
<script src="{% static 'toasts.js' %}"></script>as the last element of<body>
The files toasts.html and toasts.js are tailored for Bootstrap 5; you'll have to modify them to suit your needs.