https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m
    it would be easier to do this with an included parameter rather than changing the url
  • r
    Thank you, Deniz. I'll work on it.
  • r
    You mean something like this? hx-include="[id=25]"
  • r
    I just realized, I'm already using "Template Fragments" > Django Render Block Extension. that's where the problem started. i can't pass url by id for hx-get unfortunately :/
  • m
    can you use a morphing option here?
  • m
    can you give us an idea of what you are doing in the UI? This seems more complicated than may be necessary
  • m
    maybe some screen shots?
  • l
    I tried, but my actual project uses 
    hx-trigger="load delay:1s"
    coupled with 
    hx-swap="outerHTML"
    ("load polling", according to the htmx docs), which doesn't seem to work well with morphing. The morphing libraries did their job, but since the outer div didn't refresh, the 
    load delay
    trigger only works once. However, I'm curious why 
    hx-preserve
    doesn't work either.
  • m
    unfortunately, hx-preserve does keep the same node in the UI, but browsers sometimes reset state when a node is moved between parent nodes. It's inconsistent, even between browser versions: sometimes animated images have worked, sometimes not. Video elements have never worked. So morphing is the only real option (and the DOM needs to be similar enough that a morph can preserve the parent hierarchy)
  • m
    super annoying
  • m
    can you switch to regular polling rather than load polling?
  • m
    Or does it terminate at some point?
  • l
    It does terminate, it's essentially waiting for a process to complete on the backend and shows a spinner amongst some text during that period. My issue with morphing was that it only morphed once, I guess afterwards it didn't trigger another "load" due to the outer element remaining the same.
  • m
    Yep
  • l
    Is there any other way to solve that? I thought it's a rather common pattern
  • m
    Yes, you can do normal polling and then send a 
    286
    response code when you want it to stop polling: https://htmx.org/docs/#polling
  • m
    Another option is moving the spinner outside the content being poll updated, and then removing it when it completes w/ something like an out of band swap
  • l
    Ah, right. Can I include new content within that final 286 response which is then swapped?
  • l
    Is that possible without additional JS and without keeping state on the server (whether the spinner has already been sent to the client)? I tried that, but without state my endpoint either returns the spinner with each request - which resets it - or it doesn't include the spinner at all, which would probably require some JS to add it manually to the DOM
  • m
    it seems like the logic would be something like this:
    Copy code
    if process.is_finished
  render "list_of_stuff"  + "<div id='spinner'></div>"
else
  render "list_of_stuff"
end
</div>"
  • m
    where if the process is finished you include a small bit of oob content to empty out the spinner
  • m
    for this UI, I would consider expanding the target to enclose both the side panel and the table
  • m
    that would simplify things quite a bit
  • r
    There is no problem in the item create process, because it does not ask for any id, but when I do it with template fragment in the update process, I need to pull the whole list. If I pull the whole list, there is no problem, but I want to change a row in the list. For example I want only row two to change instead of the whole list.
    Copy code
    <list hx-get=whole list>
    <row 1 >
    <row 2 >
    <row 3 >
</list>
  • m
    I would bet that if you did a perf analysis, just re-rendering the whole list would be a round off error in your overall app performance profile
  • m
    my philosophy is to keep it as simple as possible until a perf issue comes up in perf testing or production
  • m
    You could put a trigger on each row for a specific event for that row
  • r
    yes, re-rendering the whole list will make things much easier. but then the joy of using the interface will be lost :/
  • m
    Copy code
    <tr hx-get="/product/32/row" hx-trigger="product-updated:32 from:body">
  ...
</tr>
  • m
    I don't think you'd notice a difference
1...100210031004...1146Latest