HTMX 1.9 - hx-on Attribute for Responding to Events

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 ต.ค. 2024

ความคิดเห็น • 53

  • @arunima2916
    @arunima2916 ปีที่แล้ว +14

    You are the hero of htmx community!!!

    • @bugbytes3923
      @bugbytes3923  ปีที่แล้ว +2

      Too kind :D Thanks though!

  • @dmitrymikhailovnicepianomu8688
    @dmitrymikhailovnicepianomu8688 ปีที่แล้ว +11

    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
      @bugbytes3923  ปีที่แล้ว +2

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

    • @skyhappy
      @skyhappy ปีที่แล้ว

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

    • @dmitrymikhailovnicepianomu8688
      @dmitrymikhailovnicepianomu8688 ปีที่แล้ว +2

      @@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
      @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
    @robhafemeister3100 ปีที่แล้ว +3

    Nothing better than waking up to a new BugBytes video 😁

    • @bugbytes3923
      @bugbytes3923  ปีที่แล้ว +1

      Thank you Rob! Means a lot :)

  • @sofianebebert5192
    @sofianebebert5192 ปีที่แล้ว +4

    Was looking forward to this one!

  • @repotranstech
    @repotranstech ปีที่แล้ว +5

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

    • @bugbytes3923
      @bugbytes3923  ปีที่แล้ว

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

  • @seydinaoumarsamabaly1806
    @seydinaoumarsamabaly1806 ปีที่แล้ว +2

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

  • @АйбатАманбайұлы
    @АйбатАманбайұлы 5 หลายเดือนก่อน

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

  • @JohnMitchellCalif
    @JohnMitchellCalif ปีที่แล้ว +2

    incredibly direct and clear! Subscribed

  • @Flechashe
    @Flechashe 7 หลายเดือนก่อน

    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

  • @repotranstech
    @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.

  • @dorozak9096
    @dorozak9096 ปีที่แล้ว +1

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

  • @SkeechFab
    @SkeechFab ปีที่แล้ว +1

    brilliant presentation and entertaining 👏 thx!

    • @bugbytes3923
      @bugbytes3923  ปีที่แล้ว

      You're welcome, thanks for watching!

  • @Vdherrlichkeit
    @Vdherrlichkeit ปีที่แล้ว +1

    Excellent content. Thanks

  • @JustinSpryce
    @JustinSpryce ปีที่แล้ว +1

    great tutorial, sir

  • @gaetano222
    @gaetano222 ปีที่แล้ว

    Excellent video, thank you!

    • @bugbytes3923
      @bugbytes3923  ปีที่แล้ว

      You're welcome - thanks for watching!

  • @bridroid58
    @bridroid58 ปีที่แล้ว +1

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

  • @gerhardspitzlsperger1567
    @gerhardspitzlsperger1567 ปีที่แล้ว +1

    Great as usual!

    • @bugbytes3923
      @bugbytes3923  ปีที่แล้ว

      Thank you as always Gerhard!

  • @unl0ck998
    @unl0ck998 ปีที่แล้ว +1

    Thanks again man!

    • @bugbytes3923
      @bugbytes3923  ปีที่แล้ว

      You're welcome, thank you for watching!

  • @pookiepats
    @pookiepats ปีที่แล้ว +1

    love it mang

  • @PatrickSteil
    @PatrickSteil ปีที่แล้ว +1

    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
      @tikola_nesla ปีที่แล้ว

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

    • @bugbytes3923
      @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!

  • @zachanton9856
    @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.

  • @steogen
    @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?

  • @phoenicianathletix2866
    @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

  • @IqbalArain-io3du
    @IqbalArain-io3du 6 หลายเดือนก่อน +1

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

    • @bugbytes3923
      @bugbytes3923  6 หลายเดือนก่อน

      Hey, I did a video on this, you can find it here:
      th-cam.com/video/c0dqnwbiFnI/w-d-xo.html

  • @Htbaa
    @Htbaa ปีที่แล้ว +1

    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
      @bugbytes3923  ปีที่แล้ว

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

  • @frameff9073
    @frameff9073 ปีที่แล้ว +1

    thank you

    • @bugbytes3923
      @bugbytes3923  ปีที่แล้ว

      You’re welcome, thank you for watching !

  • @bjxyysxin6371
    @bjxyysxin6371 ปีที่แล้ว +1

    It's another jQuery, haha

  • @monstercameron
    @monstercameron ปีที่แล้ว +1

    so much less code and complexity

  • @TakshakTiwari-s9e
    @TakshakTiwari-s9e ปีที่แล้ว

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