In this video, we'll look at how to integrate HTMX with Django's Messages Framework, and will add a toast message to our HTMX responses that displays feedback to users on particular actions.
Messages in Django are used to display flash messages on the page - one-time messages that give feedback to users.
We'll see how to use an HTMX Out-of-Band swap to swap in message content on Django responses. We'll style up our Toast / Alert with TailwindCSS, and we'll use AlpineJS to control display of these toasts.
We'll also see a cool trick with Alpine's x-init directive, where we use that to dismiss our toast message after a period of time has elapsed (for example, 2 seconds).
Starter Code (see 'final' branch): https://github.com/bugbytes-io/django-htmx-update-other-content
? ????????:
00:00 Intro
00:47 Project Setup
03:32 Adding messages to Django views
05:48 Add TailwindCSS Toast template
10:10 Add toast partial as HTMX OOB swap in HTMX Response
13:09 Changing Toast Positioning with TailwindCSS
14:47 Adding Alpine.js component to dismiss toast
17:32 Using messages error method in Django view
18:42 Dismissing toast with setTimeout and x-init directive
☕️ ??? ?? ? ??????:
To support the channel and encourage new videos, please consider buying me a coffee here:
https://ko-fi.com/bugbytes
▶️ Full Playlist:
https://www.youtube.com/playlist?list=PL-2EBeDYMIbRByZ8GXhcnQSuv2dog4JxY
?????? ?????:
? Blog: https://bugbytes.io/posts/
? Github: https://github.com/bugbytes-io/django-htmx-update-other-content
? Twitter: https://twitter.com/bugbytesio
? ??????? ??????? ??? ???????????:
Starter Code: https://github.com/bugbytes-io/django-htmx-update-other-content
Django Messages Framework: https://docs.djangoproject.com/en/4.1/ref/contrib/messages/
Tailwind Toast: https://flowbite.com/docs/components/toast/#simple-toast
AlpineJS Installation: https://alpinejs.dev/essentials/installation
AlpineJS x-init: https://alpinejs.dev/directives/init
#django #python #htmx #alpinejs