HTMX, AlpineJS and Django Messages - Adding Toast / Alert messages in HTMX Responses

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).

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
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
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:

▶️ Full Playlist:

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:

#django #python #htmx #alpinejs

[golvmopp]

You have no idea how valuable your videos have been for me. Thanks!

[skyhappy]

Django + htmx + alpine. The fastest way to bang out a full stack side project

[chasefrankenfeld]

Just in case anyone's interested: The reason the close button doesn't work when using htmx is that Flowbite binds its JavaScript to the DOM element during initialization. When htmx swaps the content, this binding isn't reinitialized. To fix this, you'll need to either add your own JavaScript after the swap or reinitialize Flowbite after swap.

Hope this helps!

[UkkaOp]

I was looking for guides on how to do this just yesterday, thank you man

[Luxun]

Great explanations. Well done dude. Keep up the good work.

[valentino]

Great work man. I'm learning a ton from you. It is also one of my request too!

[franke]

Fantastic content on my favorite Django channel. Would you consider doing some content on Wagtail? I feel many projects would benefit from making use of such CMS instead of relying on the Django admin alone. Cheers.

[rprana]

Just implemented, thank you for the great explanation!

[CarlosSantos-yyiu]

Cool video! What’s the advantage of using Django messages vs just passing the same data through context?

[umairsarwar]

all hail downs to you man, amazing!!!!

[iwswordpress]

Always great. Is it just me but it works fine in Chrome but not in Edge when I set up initial final at start out of the box as per video?

[tobidegnon]

Great video.
I did something similar a while back but with a slightly different approach (yours looks simpler), instead of an oob response, on the subscribe event a new request was made to a specific view to retrieve the messages, I don't remember exactly how I did it but I used a trick where the messages were not read by Django on the initial response but were available on the next request.

Regarding the problem of some js running only on page load and not after a htmx response, this is something I've encountered quite frequently recently in my projects, I haven't found a solution yet but sometimes re-executing the js script when the htmx:afterSettle event is triggered works.

[TomislavMiletic]

So many hidden gems in your channel, thank you. Maybe you could show how to use this with add to cart / update / delete feature :)

[vincentgaliano]

I struggled a full hour, trying to understand why the click on the cross didn't work for me, although a click outside worked... I just was I wrote @click: instead of @click=... 😂😂😂 Thank you for all the great videos by the way !

[christolabuschagne]

Had a similar issue returning a bootstrap toast in htmx. Could not close the toast using the X button. Solved it using hyperscript with _="on click remove #{{ id_of_toast }}". Not sure if you can also dismiss after time delay. Just an FYI ;-)

[chrisgathuthi]

Great work put in there, I have a question regarding the include tag why does it not work when I try to make a reusable form template

[punkweb]

I love htmx, alpine I'm not sold on. Think it'd rather just use small jquery scripts instead

[reelsergealain]

Nous on comprend pas anglais là, tu es trop rapide pour nous