https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • b
    > this is a bit more radical, what if we switched to full colon separators and then recursively triggered events on the entire path: >
    Copy code
    > htmx:request:after
> 
> triggers events
> 
> htmx:request:after
> htmx:request
> htmx
>
    Any thoughts on the above @User, @User ?
  • b
    @User My initial feeling is that I would always want to target a specific event, rather than a type of event. Say I listen for the 
    htmx:request
    , wouldn't that fire both before and after the request? And can I distinguish between the two?
  • s
    i like the idea of namespaces. that seems really powerful. but in what @User is mentioning, i'd be worried about the recursive ramifications. perhaps an attribute on elements to exclude from triggering if needed
  • m
    Thanks for listening šŸ™‚ Yeah, the reason the events don't work in Alpine is because 
    @htmx:afterRequest="console.log($event)"
    is seen as 
    @htmx:afterrequest="console.log($event)"
    so the listener never sees the event. In the case of Alpine both 
    htmx:after-request
    and 
    htmx:request:after
    appear to work.
  • b
    I think we're in agreement about the camelCase to kebab-case @User , @User was wondering whether it makes sense to "recursively trigger events on the entire path", of which I'm still on the fence about.
  • b
    I do find that the syntax 
    htmx:request:before
    and 
    htmx:request:after
    is slightly more predictable than 
    htmx:before-request
    and 
    htmx:after-request
    and may offer more in the way of extensibility (
    htmx:request:before:process
    , 
    htmx:request:before:send
    , just thinking aloud here).
  • m
    I like the name spaced syntax. The ability to have the events triggered on the entire path sounds good to me as well. It provides flexibility and it's really up to the end user to decide whether they want to take advantage of this, or not. I suppose the entire path will be readable regardless of the step at which it's listened to? So when listening on 
    htmx:request
    , you can check whether it's 
    before
    or 
    after
    ?
  • b
    > So when listening on htmx:request, you can check whether it's before or after ? That's the part I'm unsure of...
  • m
    we would pass the original event name along, for sure
  • m
    as one of the 
    event.detail
    values
  • m
    Sure glad I stayed in the 0.0.x version space
  • m
    current users get what they deserve!
  • b
    > we would pass the original event name along, for sure In that case I'm all for it!
  • b
    Does htmx interfere with anchor tags that point to elements on the same page? For example:
    Copy code
    html
<a href="#me">ME #</a>

<div id="me">Whatyouwannaknow</div>
    When the anchor tag is clicked, it appears to re-render the entire body...
  • b
    See it happening at https://putyourlightson.com/sprig-cookbook (htmx@0.0.7). Seen this before @User?
  • u
    @User How to cancel an event? In IC i could do 
    settings.cancel = true
    in JS event. Here I'm using:
    Copy code
    window.addEventListener(
                'beforeRequest.htmx',
                function(e) {
                      if (somethingIsWrong) {
                          cancelRequest();
                      }
                });
    So how to cancel that request? Doing 
    e.details.xhr.abort()
    disables the XHR event completely, and it only fires once.
  • u
    Should I go with 
    e.preventDefault();
    and it will do just fine? šŸ˜„
  • u
    Suddenly, 
    beforeRequest.htmx
    and stuff changed to 
    htmx:beforeRequest
    šŸ˜„
  • m
    @User yeah, sorry about that :/
  • u
    It's okay, we can always adapt in a programmer's world xD
  • m
    I don't like changing APIs that drastically, but it is still 0.0.x
  • m
    @User looking at the code
  • m
    Are these boosted links?
  • m
    It looks like we don't filter out anchor references in the boosting code
  • m
    that's a bug
  • m
  • m
    as a work around, if the elements are boosted, you can put a
    Copy code
    html
  <div hx-boosted="false">
    ....
  </div>
    around them for the time being
  • m
    I actually use the intercooler equivalent of de-boosting pretty frequently in my main app
  • m
  • m
    Copy code
    javascript
        function isLocalLink(elt) {
            return location.hostname === elt.hostname &&
                getRawAttribute(elt,'href') &&
                getRawAttribute(elt,'href').indexOf("#") !== 0;
        }
1...567...1146Latest