https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • s
    Line 188-196 for Htmx
  • s
    Easier to read actual output
  • s
    Notice in the debugger window how there's not [event] tag next to the div, that's a visual representation of the event listener bound to the element.\
  • s
    Here's a working example from another page on a select element with htmx
  • m
    @User is this dynamically created HTML?
  • m
    Dynamic content that is added after the initial load will need to be processed manually
  • m
    w/ the 
    htmx.process
    method
  • s
    I don't see this mentioned anywhere in the docs, anywhere I can read more in it?
  • m
    Sorry, I didn't document the javascript API :/
  • m
    Basically you will need to call something like
    Copy code
    js
  htmx.process(htmx.find("#whatever"))
    after the table is created
  • m
    where 
    #whatever
    is a css selector that returns the element enclosing the table
  • m
    htmx goes through the DOM and processes all the 
    hx-
    attributes at load time, so if something comes in later (out of band, I sometimes call it) it has to be dealt with explicitly
  • s
    I was just looking in the code and saw it just takes element
  • m
    It can get a little hairy if you have a lot of DOM manipulation going on out of band
  • m
    code pen showing a minimal example of how CSS transitions can work in htmx with zero javascript: https://codepen.io/htmx/pen/poyRRQG
  • o
    Intercooler.js and htmx being mentioned in this article which has been submitted to Hacker News: https://news.ycombinator.com/item?id=24258855
  • m
    Is it possible to do something like 
    hx-target="parent"
    to replace the parent element without having to use a specific selector for the parent?
  • m
    Ok, I think I got it, using 
    hx-target="this"
    on the parent seems to work.
  • m
    yep, that works
  • m
    you can also use "closest " where the selector is general
  • m
    Nice. I was searching the docs by somehow missed that. Quick question. I have a scenario where I have a button that changes state, like a favorite button, which can appear in two different places on the page, but with a different UI. One is button, the other an icon. When someone clicks either, I need to update the clicked element, but also trigger an update of the other element so it just refreshes, but doesn't toggle the state again. What would be the best approach for this?
  • m
    Would an out of band update be reasonable?
  • m
  • m
    I might target both elements w/ oob content so either one can submit to the same URL and still update both
  • m
    For my use case this would complicate things to much on the server side. I wouldn't mind triggering a secondary request on the other element, but I would need to be able to pass a variable "update" or control the request so it's /update instead of /toggle. I think something like that path-deps estension would be useful here except that it would need to support two different types of requests. One when the element is clicked directly (/toggle), and the other when the element is triggered through a custom event (/update). I will probably need to write some custom JS for this.
  • m
    Thanks!
  • m
    Another option is a custom event triggered via the header
  • m
    Thanks, I am going to explore that route. I am guessing there's no way to automatically add custom vars using an event? For example, I use HX-Trigger to fire the event, and pass it some data that gets automatically included in the request?
  • m
    the hx-trigger header should support arguments to the event
  • m
    which will be passed on in details
1...171819...1146Latest