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:
• Django & HTMX
📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
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:
https://ko-fi.com/bugbytes
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: https://www.bugbytes.io/posts/
👾 Github: https://github.com/bugbytes-io/django...
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
HTMX Update Other Content: https://htmx.org/examples/update-othe...
CSRF Token tip: https://django-htmx.readthedocs.io/en...
django-htmx triggering client events: https://django-htmx.readthedocs.io/en...
#django #htmx #python