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

[@golvmopp]

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

[@bugbytes3923]

Thanks a lot! Really happy to hear that.

[@UkkaOp7]

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

[@chasefrankenfeld8381]

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!

[@skyhappy]

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

[@bugbytes3923]

Yes!

[@Luxun117]

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

[@bugbytes3923]

Thank you very much!

[@valentino7057]

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

[@bugbytes3923]

Thanks a lot man!

[@rprana12777]

Just implemented, thank you for the great explanation!

[@bugbytes3923]

Thanks so much, glad to hear it!

[@Coden69]

amazing content

[@bugbytes3923]

Thanks a lot for watching!

[@JustinSpryce]

Great lesson

[@bugbytes3923]

Cheers Justin!

[@SmartC2007]

Thanks a lot for another great video.

[@bugbytes3923]

Thanks for watching!

[@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 !

[@bugbytes3923]

Haha - well done for solving it - these small syntax issues trip me up a lot too 😂

[@umairsarwar7472]

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

[@bugbytes3923]

Thanks a lot!!

[@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 :)

[@bugbytes3923]

Thanks a lot Tomislav! Will look into that suggestion.

[@franke3562]

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.

[@bugbytes3923]

Thank you Frank! I am definitely doing some Wagtail content soon, it's high on my list. Any example Wagtail apps you'd like to see in a video series?
Thanks again for watching.

[@franke3562]

@@bugbytes3923 Happy to hear Wagtail is already on your list. I am new to Wagtail. Currently trying it out on an art website I am building for a friend. I think any sort of portfolio website would be a good app example for Wagtail. Or a blog, if need be. Wagtail seems great so far - only their documentation could really be a bit more detailed and complete.🙂

[@christolabuschagne4382]

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

[@bugbytes3923]

Oh, nice! Excellent way to deal with this, thanks for sharing!

[@clauderogers2791]

@@bugbytes3923
In a script tag at the bottom of the body:
htmx.onLoad(function (content) {
initFlowbite();
});

[@hroman_codes]

Thank you!!

[@bugbytes3923]

Thanks for watching!

[@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?

[@tobidegnon4409]

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.

[@bugbytes3923]

Thanks a lot Tobi!
Your approach sounds good. Somewhat similar!
Good call on the htmx:afterSettle event. I'll look into that a bit more and see if I can do some content around this event for dynamic elements.
Thanks again!

[@CarlosSantos-yy5iu]

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

[@chrisgathuthi1831]

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

[@repotranstech]

Cool video.

[@bugbytes3923]

Thank you!

[@punkweb]

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

[@bugbytes3923]

Fair point. jQuery still has a valuable place, agreed!

[@eagleofsharm]

Great👍

[@bugbytes3923]

Thanks!

[@frameff9073]

thank

[@bugbytes3923]

You're welcome!

[@maheshpol20]

Thanks

[@bugbytes3923]

You're welcome.

[@reelsergealain]

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