https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • g

    gray-morning-3453

    04/19/2023, 5:08 AM
    ChatGPT suggested me this code (I am impressed actually), what are your thoughts?
    Copy code
    htmx.on('htmx:afterSwap', function(event) {
      // Get all the newly added buttons in the swapped HTML
      var newButtons = event.detail.querySelectorAll('button');
    
      // Attach the same event handler function to each new button
      for (var i = 0; i < newButtons.length; i++) {
        newButtons[i].addEventListener('click', myEventHandlerFunction);
      }
    });
    
    function myEventHandlerFunction(event) {
      // Your event handler code here
    }
  • s

    sparse-musician-64201

    04/19/2023, 11:06 AM
    i mean if you want an event handler on all buttons, even dynamically inserted ones, then it is probably far more easy and performant to just register it on document.body and do the filtering on the click event.
  • n

    numerous-agent-22346

    04/19/2023, 11:15 AM
    but if the listener has to be installed on every button then the same piece of code can be included in the button itself I mean in the server code when writing the piece of code that returns the button snippet
  • n

    numerous-agent-22346

    04/19/2023, 11:23 AM
    In hyperscript something like
    on click from -selector- in -selector- call myEventHandler(event)
  • s

    sparse-musician-64201

    04/19/2023, 11:25 AM
    ya for sure, always prefer explicit invokation over implicit functionality hooks, in all places where this is sensible.
  • f

    future-plumber-63481

    04/19/2023, 12:14 PM
    I have a form with a select, search input and button elements. The hx-trigger is on the form element. I want the form to submit 1) if the button is clicked, 2) if enter is pressed in the search input, or 3) if the x control on the search input is clicked to clear the field.
    hx-trigger="search from:input, submit"
    #1 and #3 work fine. #2 causes the form to be submitted twice. Can anyone help me work out why?
  • s

    sparse-musician-64201

    04/19/2023, 12:15 PM
    remove the 'submit' from hx-triggeR?
  • s

    sparse-musician-64201

    04/19/2023, 12:16 PM
    it should already do that by itself right?
  • f

    future-plumber-63481

    04/19/2023, 12:19 PM
    I tried that already but it seems that if I add the
    search
    event I have to then explicitly include the
    submit
    event.
  • f

    future-plumber-63481

    04/19/2023, 12:23 PM
    Oh wait, I think I've got it.
    submit, search queue:none
    seems to do it.
  • m

    mysterious-toddler-20573

    04/19/2023, 2:07 PM
    htmx respects the
    autofocus
    attribute from standard HTML: https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L861
  • n

    numerous-agent-22346

    04/19/2023, 2:16 PM
    hi all, I wanted to share with you this link: https://cprohm.de/blog/htmx-custom-elements/ I am doing something similar in my project, I really like this approach
  • m

    mysterious-toddler-20573

    04/19/2023, 2:39 PM
    wow, very cool!
  • m

    mysterious-toddler-20573

    04/19/2023, 2:39 PM
    would love some contributed docs on this approach!
  • m

    mysterious-toddler-20573

    04/19/2023, 2:41 PM
    https://twitter.com/htmx_org/status/1648698321605894145
  • m

    mysterious-toddler-20573

    04/19/2023, 3:17 PM
    šŸ˜‘ too many
    general
    channels in my life
  • r

    refined-waiter-90422

    04/19/2023, 3:45 PM
    1 liner pattern for inline
    <script>
    without class/id: might inspire you.
  • r

    refined-waiter-90422

    04/19/2023, 3:48 PM
    Noticed the
    <script>$on...
    at the bottom of your post which is kinda nice.
  • m

    magnificent-boots-1658

    04/19/2023, 4:08 PM
    Interesting. Thought I’d tried that but maybe not. Will check later.
  • m

    mysterious-toddler-20573

    04/19/2023, 4:35 PM
    np, it might be broken, plz let me know!
  • q

    quick-lamp-41411

    04/19/2023, 8:31 PM
    Hi all. I've got a scenario where I'm handling
    afterSettle
    events on the
    document
    but some of the events I'd like to handle are happening on elements that have been removed from the DOM so the event isn't bubbling up. Is there any easy way to resolve this?
  • t

    thousands-planet-99021

    04/19/2023, 10:20 PM
    https://htmx.org/docs/#modifying_swapping_behavior_with_events Is there a way to render responses (perform swap) with 422 error without writing this piece of js ? like an html attribute ? I think it's pretty common for a failed server side validation to re-render form with validation errors (and 422 status code), that is what symfony (PHP framework) does as well
  • n

    narrow-midnight-94579

    04/19/2023, 10:33 PM
    Hi, I need some help using hyperscript. I am building an inbox UI with htmx. Is there a way to change the hx-target based on the response from the server using hyperscript? I don't want to write a tiny js for that. #796428329531605032
  • n

    narrow-midnight-94579

    04/19/2023, 10:35 PM
    @thousands-planet-99021 I believe we asked almost similar question šŸ˜‰
  • m

    mysterious-toddler-20573

    04/19/2023, 10:43 PM
    maybe use the
    HX-Retarget
    response header: https://htmx.org/reference/#response_headers
  • m

    mysterious-toddler-20573

    04/19/2023, 10:44 PM
    400 responses are not rendered into the UI by default, you will need to modify that behavior using the code above.
  • t

    thousands-planet-99021

    04/19/2023, 11:01 PM
    Yes, that's what we're doing now but I wanted to avoid it
  • m

    mysterious-toddler-20573

    04/20/2023, 12:33 AM
    only way right now is w/ some scripting or forking the project šŸ™‚
  • s

    sparse-musician-64201

    04/20/2023, 10:20 AM
    could be nice to have a way to define error handling with something like hx-error="void|swap|trigger-event" or something like this.
  • s

    sparse-musician-64201

    04/20/2023, 10:20 AM
    but could easily get complex and confusing when people want to differentiate between 400 and 500 errors etc.
1...109810991100...1146Latest