Django and HTMX #17 - Updating Other Content - Out-Of-Band Swaps and Custom Events

In this video, learn how to update non-target elements using two different HTMX mechanisms:

1. Out-of-band swaps: with the hx-swap-oob attribute, you can replace non-target elements in your responses.
2. Triggering client events: your responses to HTMX requests can contain an HX-Trigger HTTP header, which can trigger a client-side event that performs subsequent actions to update the UI. We'll see how to use a tool from the django-htmx package to achieve this.

▶️ Full Playlist:

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
01:06 Setup
01:57 Creating Event model
03:59 Registering model with admin
06:49 Improving event template
08:10 Subscribing to event with HTMX
09:00 Updating with hx-swap-oob
14:40 Unsubscribing to event with HTMX
20:53 Updating user count
21:49 Triggering custom events
24:34 django-htmx trigger_client_event function

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:

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

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

#django #htmx #python

[mentotong]

This is one the best tutorials so far for Django + HTMX. Once HTMX documentation is complete on how to use it properly, I think, there is no need to learn complicated javascript library like React for example.

[alexdin]

you are a life saver I was searching for something like this for one week thanks for sharing

[AlfredoGuako]

Haha, arrested development! Great htmx tutorials as well

[amirroohi]

im very happy i found your channel, been subscribed for a long time now, but only now am i using this stuff

[vivaldi-qoxj]

I will watch all your htmx videos from the beginning again.

[silkogelman]

Dynamically updating multiple page parts feels like magic with HTMX.
Thank you for this detailed tutorial about this topic BugBytes!
And super awesome the layout is built with Tailwind CSS. 🥳

[trosgate]

Mind blowing. Keep up the htmx because we all love it

[naumanarif]

Your Channel Must be renamed to 'Clear The Clutter' because its on point and very nicely arranged!

[seydinaoumarsamabaly]

Mate You explain things with such ease. You are a great Man for real 🙌 Respect.

[simonlauer]

Using Flask rather than Django, but that’s one of the cool things about HTMX. It’s backend agnostic. I can use the same techniques in my Flask application. Thanks for the walkthrough. Was looking for something like this

[sligovolts]

Just what I needed to start my day. Thank you very much!

[kbdow]

Thanks for the tutorial. Having done a Django app, I found many parts of this series very educative when it came to refreshing parts of the page with new data

[jephtah]

struggled with this all yesterday, my own use case was that i want to increase order quantity in the cart and simultaneously, update other part of the UI, like the order summary and so on, have turned the documentation inside out, and was already frustrated, i sincerely appreciate this content bro

[riccardozulian]

Thank you for this tutorial! I think there is an error on the last part when you are replacing the element "event-count" with "outerHTML". This is replacing the full paragraph with a paragraph that doesn't have the hx-trigger any more, so it's working only one time. I've instead used the default "innerHTML" and changed the event_count.html partial to only the content.

[harunayakubu]

Kindly help out with a tutorial on how to implement dynamic forms with HTMX in Django either using formset or just form.

[brianhrad]

Oh man, this was the video I've been waiting for, thank you so much! I have a one question maybe you can hep me with. I noticed that there is a blank dictionary in the trigger_client_event(response, "event", {}) function. How would you go about being able to grab information out of that dictionary if you were to put anything in there? I would imagine that could be pretty useful to have even more customized event triggers.

[proekidz]

well good tut . i have a small issue though mine says method Post not allowed. when i hit subscribe button

[cornelkenef]

How can you avoid duplicating the html code in the partials? I know you can use {% include %}, but if you have an oob swap then you need create yet another html file which includes the elements you want to swap.