https://htmx.org logo
Powered by
# htmx-general
  • g
    I've got this as the generated topic link
    Copy code
    <i id="refreshAcct1" class="bi-list has-pointer icon-button" title="view messages" hx-get="/messages/view/1" hx-trigger="click, refreshAcct1" hx-target="#messages-target"></i>
    Then I've got this as my trigger php header
    Copy code
    HX-Trigger: {"togglepanel":"","refreshAcct1":""}
    The click event on the topic works fine. The togglepanel just closes the edit panel and reopens the messages-target div. The refreshAcct1 doesn't work. I'm not great with event stuff so probably something I'm not doing right?
  • m
    My guess is HX-Triggers on the document, not the 
    <i>
    tag, so it doesn't catch the event. Per the docs https://htmx.org/headers/x-hx-trigger/ If that's the case, you need to add an event listener that triggers the event on the tag using the htmx.trigger api method https://htmx.org/api/#trigger. This is just a wild guess.
  • m
    Copy code
    js
document.body.addEventListener("updateAcct1", function(evt){
    htmx.trigger(htmx.find("#refreshAcct1"), 'refreshAcct1');
})
    And in HX-Trigger, use 
    updateAcct1
    instead of 
    refreshAcct1
    because I am not sure if you'll get into an infinite loop otherwise.
  • m
    Yeah, I think @User is right: the event is being triggered on the element being replaced and 
    #refreshAcct1
    isn't in the hierarchy to get that message. A couple of ideas: 1 - Generalize the event to something like 
    refreshElement
    and pass down the account id, so you could write logic like this: 
    HX-Trigger: {"updateAccount": {"account" : accountString}}
    Copy code
    js
document.body.addEventListener("updateAccount", function(evt){
    var accountStr = evt.detail.account;
    htmx.trigger(htmx.find("#refresh" + accountStr), 'refresh' + accountStr);
})
  • m
    A second option would be to use the new 
    from
    modifier in triggers: https://htmx.org/attributes/hx-trigger/
  • m
    Copy code
    html
<i id="refreshAcct1" 
   class="bi-list has-pointer icon-button" 
   title="view messages" 
   hx-get="/messages/view/1" 
   hx-trigger="click, refreshAcct1 from:body" 
   hx-target="#messages-target"></i>
  • m
    Unfortunately I realized after I shipped that feature that it can cause a resource leak, since we won't remove that listener from the body
  • m
    Still working out the details of how to fix that, but I have some ideas.
  • g
    Ok -I had figured out setting up my own listener passing the id down as you described and that did work. I'll take a look at your suggestio with the from: body thanks.
  • g
    The from:body does get it to work. Will use the listener approach for now though due to leak issue.
  • m
    awesome! Great to hear. I will try to get a fix for the resource leak done in the next week or two, I'm very slammed right now
  • g
    @mysterious-toddler-20573 when I use hyperscript from the cdn on load doesn't work. Downloaded it from github and it does?
  • m
    @User I have a fix for the resource leak in dev, extending @User 's cleanup code to include unwiring remote triggers
  • m
    I wonder if I screwed up the release for hyperscript...
  • g
    Credit where it’s due, I don’t think I wrote any cleanup code. Perhaps @big-airline-13935?
  • g
    (Insert generic joke about clean code here)
  • b
    Not me either 😌
  • f
    Hi! When doing a hx-swap is there a built-in way to revert or swap back to the old content? The use case would be expanding a row in a list to show more details or show an edit form and then clicking cancel.
  • m
    The htmx way would be to have an end point for the old content and use 
    hx-get
    to retrieve it
  • f
    Ok, that makes sense.
  • m
    \> tfw you are old enough to be a stranger to yourself
  • m
    also happy to report that a perf test I wrote caught that removing all event listeners was too expensive, so we only remove the ones on other elements
  • s
    this is weird, when using htmx to swap an element that is a parent of the htmx link, the htmx indicator class is set while waiting for the sswap (as always) but it is never removed when the swap is done.
  • s
    if works perfectly as long as I target an element that isn't a parent of the element with ht-get.
  • m
    huh, sounds like a bug
  • s
    man im stupid how do i link a fiddle?
  • s
    apaprently i screwed up and lost the fifle but its easy to replicate.
  • t
    is htmlx as capable as hotwire currently?
  • m
  • t
    i'll take this as a yesn't
1...134135136...1146Latest