https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • q
    I had an issue with a 
    htmx:afterSettle
    handler on the document not triggering because the swap was 
    remove
    and by the time that event is raised, the element has been removed
  • q
    However adding a a 
    HX-Trigger-After-Settle
    on the response works because it specifically checks whether the element has been removed, and if so, raises the event on the body
  • m
    i will need to go back and look at it, i vaguely remember trying to keep the pre-removal hierarchy around and triggering the events on the last parent not removed
  • m
    but I might be misremembering
  • q
    No worries, I was just wondering about the disparity is all 🙂
  • g
    has anyone made a typeahead search where if you lose focus or click an item in the dropdown, the input is replaced with what you clicked and the dropdown dissapears?
  • g
    kinda. HTML's 
    <datalist>
    works almost like that
  • f
    I keep forgetting 
    datalist
    is a thing
  • g
    if the browser makers would improve it slightly, it would kill the need for tons of custom JS
  • f
    looks at iPhones Yeah no way lol
  • g
    datalist isn't really enough..
  • g
    yeah, you can definitely design a more fleshed-out component using htmx, with some careful work.
  • g
    alpine is also an option
  • h
    Yep, I've used the wittily named Tom Select for that: https://tom-select.js.org/
  • h
    Works nicely with local or remote data as a typeahead style search, has good accessibility (focus, keyboard control etc) and a pretty comprehensive API.
  • h
    I've used it to create a faceted style drill-down search (imagine a list of products with various filters), with htmx swapping out the Tom Select controls and the results listing when a selection is made, so the list of available options is narrowed as the user drills down. (But if I didn't want the list of items in a control to reduce as selections are made, I could just swap out the results listing).
  • c
    Hi, I have HTMX loaded in my page but for some reason events aren't triggering. My element is defined like this: Click Me!. When I click, no htmx event is triggered. htmx itself does appear to be loaded correctly; I have tried loading it both using a node import and as a direct tag in my header. I think the problem is that htmx is not being attached to the element for some reason, as htmx itself looks ok and I'm not getting any obvious JS errors. Any help appreciated.
  • b
    Have look here and turn on debugging: https://htmx.org/docs/#debugging
  • b
    See whether you get something in the console
  • c
    Thanks - I should have said that I've gone through the steps suggested there already, but no dice. I can't see any htmx error. Events are triggering as expected. I suspect it may be a loading issue but I'll need to reduce down the sample as there are a few other scripts on the page and maybe something else is interfering.
  • b
    Nothing in the network tab? That GET request not firing?
  • b
    Can you try getting rid of the 
    hx-trigger
    as well? I think 
    click
    is the default handler, so just want to make sure that's not confusing something...
  • c
    I have narrowed it down a bit. I added the same markup to a separate page, and the request is firing there. It looks like it's something specific to the original page. I'll keep digging...
  • c
    Ok, figured it out. On the original page, the html is designed to be embeddable in another page, so it was being loaded via an XHR. I needed to run 
    htmx.process()
    on that mount point. Working now!
  • g
    Whenever I come across 'debugging' here, I can't help but wonder if we need a debug UI or something similar. Personally, I like the one in the examples, but I'm unsure if we need something like React Query Dev Tools. Maybe it could have some additional features, like a hypothetical history or the ability to return an HTML part that was changed by htmx at any point in that history, or maybe something else entirely. And also i think it is too much.

    https://cdn.discordapp.com/attachments/725789747212976259/1099372674091859998/image.pngâ–¾

    https://cdn.discordapp.com/attachments/725789747212976259/1099372674364477470/DevtoolsReactQuery.pngâ–¾

  • g
    question: is it intentional that 
    <whatever hx-swap-oob>...</whatever>
    (boolean attribute being present without a value) doesn't work and we need to use 
    hx-swap-oob="true"
    ?
  • g
    https://htmx.org/attributes/hx-swap-oob/ docs says true and outerHTML seems valid to be working @great-cartoon-12331 also hx-swap values
  • g
    ok, i guess a value is required then
  • o
    Ok so I have an htmx-post that essentially reloads itself. I have a script in that Django template being reloaded that validates an email input. When I run the htmx post the browser tells me my JavaScript function is already declared and gives me an error. Did I give enough information to give me some troubleshooting tips? Thank you!
  • g
    taking a step back from the immediate question–why not use the browser's built-in form validation i.e. 
    <input type="email">
    ?
1...110011011102...1146Latest