https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • a
    on this "table fetch", it only gets 10 rows, and will request more if they are not enough to fill the screen (or if the user scrolls down until it reveals the last row)
  • a
    clicking on the same column multiple times changes the sort order, refreshing the table each time
  • a
    this is how the headers look when it's sorting by Timestamp, with incrementing order:
  • a
    decrementing order would be 
    order_by=-timestamp
  • a
    (and yes, I am using simple UTF 8 for the arrow up/down icons)
  • a
    then the last TR of each bundle of rows looks like:
  • p
    Hi there, I'm trying to inspect how HTMX handles AJAX requests but can't seem to figure it out. For example, if I use Dev Tools to inspect what happens when I click the button in this Example, nothing shows up in the network tab yet the data is populated via hx-get. Is that because this is just a contrived example, or am i missing something? https://htmx.org/examples/click-to-load/
  • a
    yeah, I think there are some shenanigans on the demos. On a real scenario you would see something like this:
  • p
    ah. ok. Thanks!
  • p
    I suppose what I'm really trying to figure out is when does the 
    load
    special event get triggered? You enter a URL, it sends a request to the server, it does what it needs to do to generate the page HTML, then that gets returned. Lets say the server takes 1s to generate and return the page - obviously the AJAX can't be triggered during that time. The browser will then start rendering the html and sends out a bunch of concurrent requests for css, js, etc... Does the 
    load
    get triggered right at the start of this process, or sometime later? I hope I'm being clear/making sense...
  • w
    thanks for the details.
  • a
  • p
    I'm not sure. I was reading the docs here: https://htmx.org/docs/#special-events
  • p
    Perhaps that's the same event
  • l
    Hello, I am trying to disable history snapshotting using 'hx-history="false"', but I am unable to get it to work. I would like for the page to fully reload when the back button is pressed in the browser. My understanding of "hx-history" is that if it is placed anywhere on the page and equal to false, htmx should send a request to the server rather than loading the page from the cache. However, in my experience the cache is always used. Any insight into what I am doing wrong? Thanks
  • m
    the demos all use a mock server so we don't have to run anything special to make them work. 
    load
    is fired when an element is processed by htmx, either on the initial page load or when new content is added via an htmx-based request
  • m
    gah, it looks like the docs include that feature, but it hasn't been released yet. Sorry about that.
  • m
    You can run off the htmx.js in the 
    dev
    branch or you can set the 
    htmx.config.historyCacheSize
    config item to 
    0
  • m
  • p
    Thanks!
  • l
    @mysterious-toddler-20573 Thanks so much!
  • l
    What is the best way to use an anchor tag with htmx? For instance, link will execute the link without hx-request header to the server. But if instead, you use link, then when a user tries to right click on the link and copy it, they will not be able to get the correct location.
  • m
    Boost the link instead
  • f
    I have two different javascript functions. With onclick, I can run the first function when requested. How can I run the second function as soon as the response to this request is received? Any answer, even a mistake
  • f
    Hi ✋
  • f
    Is there a way for HTMX to wait for a response and run a function as soon as the response is received?
  • m
    I would use the 
    HX-Trigger
    response header https://htmx.org/headers/hx-trigger/ . You could also listen to the 
    htmx:afterSwap
    event to run your function https://htmx.org/events/#htmx:afterSwap
  • l
    Is there a way to clean up 3rd party javascript so there are no memory leaks? For instance, in Vue.js there is a method "beforeUmount" in the lifecycle where you can free memory before a component disappears from the page (on back, for example). As a concrete example, if you use bootstrap's js to trigger showing a modal, and then you use htmx to replace the page, the memory allocated from bootstrap to the modal will leak. I looked in the events, and I see events related to "onLoad", but I don't see any in the vein of a destructor like "unload" or "unmount".
  • l
    In that example, essentially bootstrap's js holds a reference to a modal that no longer exists as it was replaced by htmx
  • i
    Do you know how bootstrap is maintaining a reference to the modal? If it's just a bunch of event handlers on elements that are themselves not reachable by the GC, there shouldn't be a problem. But if they stuck a reference to the modal in something like a global 
    setInterval
    (or something), then that's trickier.
1...958959960...1146Latest