HTMX 1.9 - hx-on Attribute for Responding to Events

[@arunima2916]

You are the hero of htmx community!!!

[@bugbytes3923]

Too kind :D Thanks though!

[@dmitrymikhailovnicepianomu8688]

Great! I studied all your videos about htmx. Currently I am working on erp system for a production company. I’ve already written almost 14000 lines of Python code(Django) and well 150000 on front end. There are more than 400 urls/endpoints. And the cool feature about my project is that I use htmx a lot. I even managed to create nested sortable js thing. I wound not have done if it wasn’t for you and your channel. Thank you so much! Keep going!

[@bugbytes3923]

Thanks a lot Dmitry! I'm glad these videos have helped - sounds like a cool (but complex) project! Thanks again.

[@skyhappy]

Why not use a proper frontend framework/library then like react or svelte?

[@dmitrymikhailovnicepianomu8688]

@@skyhappy well, I am the only one in the company who is responsible for optimisation. So I do not only write code but also question people what they do trying to understand how to improve their job routine. Also I plan how to structure database, what functionality create first, I am a QA and so on and so forth. When I came to this company they worked in 4 different programs/areas: trello, ms access, excel , Google sheets . There were a lot of copy and pasting. Right now they are working in one area in my application and they are happy. So back to your question: of course it would be nicer to create frontend in react, but I am sure that it would take more time and more important that probably I wouldn’t be able to create this program because it wasn’t clear from the start how to do the job. A lot of corrections have been made so far. That’s why django + htmx have been so helpful. Maybe when whole structure of the program is ready I’ll rewrite frondend in react.

[@StonedApe420]

@@dmitrymikhailovnicepianomu8688 Same story here. Django + HTMX ( for SSR ) + Alpine ( for CSR ). And you get a rapid prototyping beast. You can search for Product/Market Fit as a one-man show. You can always solve Technical Debt in Ver.2.0, but there will be no Ver.2.0 without PMF.

[@robhafemeister3100]

Nothing better than waking up to a new BugBytes video 😁

[@bugbytes3923]

Thank you Rob! Means a lot :)

[@АйбатАманбайұлы]

seeing the channel for the first time. Actually, more useful tips given)). Bravo

[@sofianebebert5192]

Was looking forward to this one!

[@bugbytes3923]

Thanks!

[@repotranstech]

Am always alert for your htmx videos.Also waiting for a full crud htmx Django tutorial.

[@bugbytes3923]

Thank you, something will appear in the next few months ;)

[@seydinaoumarsamabaly1806]

One of the best youtube channels, the most underrated ! Keep up mate you are the best for us !

[@bugbytes3923]

Thanks a lot man!

[@Flechashe]

I needed to trigger Javascript when the content was already in the DOM, otherwise my content bugged. So I changed htmx:after-request (in button) to htmx:load (in one of the top level elements of the response) and it worked. Your solution of htmx:after-settle (in hx-target element) also works. I have no idea why htmx:load needs to be in one of the top level elements Honestly htmx docs could explain the on-request events trigger order better, with examples and such, but well, once you understand how stuff works it's a very powerful tool

[@JohnMitchellCalif]

incredibly direct and clear! Subscribed

[@bugbytes3923]

Thanks so much!

[@dorozak9096]

Good Video, I really liked it! It deserves more views!

[@bugbytes3923]

Thanks a lot!

[@repotranstech]

Htmx is so good that creating a cron job is as simple as calling a view that does some task every few seconds using hx-trigger.Its been quite helpful in a Fintech web application am developing.

[@SkeechFab]

brilliant presentation and entertaining 👏 thx!

[@bugbytes3923]

You're welcome, thanks for watching!

[@bridroid58]

great stuff! hope to see more django + htmx videos :)

[@bugbytes3923]

Thanks a lot! Will do!

[@gaetano222]

Excellent video, thank you!

[@bugbytes3923]

You're welcome - thanks for watching!

[@Vdherrlichkeit]

Excellent content. Thanks

[@bugbytes3923]

Thanks a lot!

[@JustinSpryce]

great tutorial, sir

[@bugbytes3923]

Thanks Justin 🙏

[@gerhardspitzlsperger1567]

Great as usual!

[@bugbytes3923]

Thank you as always Gerhard!

[@unl0ck998]

Thanks again man!

[@bugbytes3923]

You're welcome, thank you for watching!

[@zachanton9856]

Hi! Love your videos. Just getting into htmx now. How can I retrieve the response on the client using a custom event? I'm using Go and am trying something like hx-on="loginEvent: jsLoginFunction()" then defining the jsLoginFunction as const jsLoginFunction = (event) => { console.log(event) }. I have set the response headers with HX-Trigger: loginEvent using the writer argument in the handler function.

[@PatrickSteil]

Total noon to htmx here, but could you have sent the “3 users found” message from the custom event in python thus eliminating the JavaScript you added?

[@tikola_nesla]

I was thinking the same, the example he provided is not good

[@bugbytes3923]

Very true - I think the purpose of this example was to show how to call a JS function that's defined elsewhere in the JS codebase from the "hx-on" attribute. Very much a toy example though!

[@phoenicianathletix2866]

Can banner advertising systems thats normally written in JS be replaced with HTMX/Hyperscript? Like the coding that display/rotate the random google ad banners

[@steogen]

Hi and thanks for the video! I am trying to load a django partial on a page using HTMX (hx-get + hx-target). The partial has a Flowbite component (a dropdown). When the partial HTML is loaded onto the page, the Flowbite component does not work. The reason is that Flowbite js initialises when the page is first loaded when the partial is not been called yet. I though of adding hx-on:"htmx: afterSettle: someCallback();" to the target div. This works in that the function is called when the new html is loaded in the div, however I don't know how to reinitialise Flowbite using that function. Would you have a suggestion on how to get this to work?

[@pookiepats]

love it mang

[@bugbytes3923]

Cheers man!

[@IqbalArain-io3du]

Can you also make video for transitions so when we receive response it is swaped or gets into DOM with a transition / animation. ❤

[@bugbytes3923]

Hey, I did a video on this, you can find it here: kzbin.info/www/bejne/mWHHoqGtl855pKs

[@Htbaa]

hx-on seems very useful, but if you’re already using _hyperscript it seems redundant. Still, you might not always need or use hyperscript and it’s one dependency less if not required.

[@bugbytes3923]

It’s great for simple use cases! For more complex stuff, hyperscript would be a better solution.

[@frameff9073]

thank you

[@bugbytes3923]

You’re welcome, thank you for watching !

[@bjxyysxin6371]

It's another jQuery, haha

[@monstercameron]

so much less code and complexity

[@TakshakTiwari-s9e]

Genre this event is not working, can you please tell me why ?