HTMX - hx-select and hx-select-oob Attributes in HTMX

In this video, we'll take a look at two HTMX attributes that have not yet been covered on the channel!
1. hx-select
2. hx-select-oob
These allow you to select a particular element from the HTML response to your HTMX requests, and only swap that content into the HTMX target.
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
ko-fi.com/bugb...
▶️ Full Playlist:
• Django & HTMX
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: bugbytes.io/po...
👾 Github: github.com/bug...
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
#django #python #htmx

[@NiM44]

You saved me +100h over projects during couple months i found your channel , Well doing mate Thank you.

[@bugbytes3923]

That's great to hear, glad the channel has helped you. Thanks a lot for the support!

[@МаксимБалашов-м3г]

HTMХ is great! I'm using the hx-select-oob property to show django messages to users via toasts. Thanks again for your work! The videos are very educational and informative!

[@bugbytes3923]

Oh, nice technique - good solution for Django messages I think!

[@seydinaoumarsamabaly1806]

The best ever ! The django-htmx matador, always pushing us to new limit. Very useful at this right moment. Thank for all Master 🙌🏾🙌🏾🙌🏾 !

[@bugbytes3923]

Thanks so much! 😃

[@AmoahDevLabs]

😀😀😀 I can't believe htmx has all these cool features. Thanks very much for sharing.

[@bugbytes3923]

Thanks a lot! Yeah - for a small library, HTMX has so much to offer!

[@morgango]

Super useful, really solves the multiple template issue if you just want to refresh a part of a page. Nicely done!

[@bugbytes3923]

Thanks a lot!

[@repotranstech]

Thanks for this htmx video.Your bulk multiple form video was really helpful on a feature I was working on.

[@bugbytes3923]

Ah, glad to hear that it helped, and thanks for the support!

[@FirdausAziz]

Your HTMX videos are always appreciated. And for me this one is super duper appreciated. I have always been confused on how to implement OOB. Thank you very much.

[@bugbytes3923]

Glad to hear it, thanks a lot!

[@silkogelman]

Wow this is really cool! Thank you 🙏😀 Really nice to have re-usable Views, even though it requires a bit of planning in more complex scenarios. Looking forward to the django-template-partials video!

[@bugbytes3923]

Thank you Sil! Will try and record that one soon!

[@robhafemeister3100]

Awesome channel and awesome HTMX, looking forward to the django-template-partials video.

[@bugbytes3923]

Thanks for the support Rob! Will try and release that one ASAP.

[@edwardkaharo1271]

thanks as always for sharing...really learnt a lot from you...please share more HTMX functionality and features

[@davidconnelly]

Good tutorial. Thank you. Can I just ask, on 10:45 - why not just surround the button with a div that has 'style equals display of none'?

[@JustinSpryce]

Great video, please continue doing more django htmx videos

[@bugbytes3923]

Thanks a lot Justin!

[@dovh49]

That sure makes development a little easier! Nice escape hatch when you can't return exactly what is needed.

[@bugbytes3923]

Very true! Thanks for watching.

[@mrmuranga]

your videos have really made a huge impact in my development.... especially the hmtx Django which I have now deployed in a couple of prod environments. A huge thank you. please do one on how you can manage automated logouts and warnings on inactivity on web browsers.. otherwise cheers...

[@bugbytes3923]

Thanks a lot! Really delighted to hear that, thank you - I'll have a look at your suggestion!

[@rokibulhaque1673]

Hi, I am a great fan of your channel. It would be great if you make a ticket management video hwving multiple groups/hops/stakes of individual ticket.

[@vivaldi-qo7xj]

thanks. I added it to my list.

[@swelanauguste6176]

Thanks for the videos, always appreciate it 👍

[@bugbytes3923]

Thanks as always 😄

[@JasonSobell]

FYI, you now need to add `hx-swap-oob='true'` in your response data to specify which selector the "Users Fetched" button will replace. Just an ID no longer works. You can also use the swap attributes, which is nice, such as `hx-swap-oob='outerhtml:#fetch-btn'`

[@立法院很忙]

More awesome HTMX content, thank you!🙏

[@bugbytes3923]

Thanks a lot!

[@jen24499]

Ye m8, seems like htmx is about to explode, it is literally everywhere now, like 100 seconds video, a lot of topics here and there, etc. You should catch the moment!

[@bugbytes3923]

I didn't even know about that video - explains all the traffic in the last day haha 😃

[@rampageshary8194]

can I make realtime chat with just htmx in django without using django channels?

[@bugbytes3923]

You can definitely do it without channels - it may be more difficult, but it's possible.

[@spyroskrinas9147]

one more awesome video!

[@bugbytes3923]

Thanks a lot!

[@alsenydiallo2127]

Thanks for the videos. Can you provide us with a tutorial on creating a CRUD application using HTMX and class-based views? Please note that the tutorial should cover the integration of validations within the class-based views. Additionally, the tutorial should demonstrate the creation and listing functionalities on the same page. Thank you in advance

[@bugbytes3923]

Thanks for the suggestion - I don't typically use class-based views nowadays, but I'll try and include more content about them - they're definitely an important part of Django to understand.

[@alsenydiallo2127]

@@bugbytes3923 Thank you for your availability.

[@watsoncyrusanikwai3888]

Nice

[@bugbytes3923]

Thanks!

[@XavierLarrea]

Thanks!!

[@bugbytes3923]

You're welcome - thanks for watching!

[@zoyaa9759]

Like!

[@bugbytes3923]

Thanks!

[@frameff9073]

thank

[@bugbytes3923]

thanks for watching!

[@AliHassan-wc6nb]

​@@bugbytes3923man!!! You are great!

[@bugbytes3923]

@@AliHassan-wc6nb Thanks a lot 😄

[@julianjackson8756]

I mean I get this is just a show case of attributes available in HTMX but this is so messy because you're not splitting out the templates.

[@teclote]

Works great, thank you. I had trouble pulling data into a Select tag because the Div with the id that contains the options to be selected apparently screws up the html in the target Select tag. (confusing, 2 different meanings of the word select) I get code 200 ok but the control doesn't render. And it works fine if I pull the options into a Div tag instead of a Select tag. Is there a way to select only the inner-html of the selected area but not the Div tag that has the id? Thanks again.