https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • f
    A fellow stylus enjoyer
  • b
    cool, thanks 🙂
  • m
    didn't someone post a htmx css library or something? It looked good but I can't find it now
  • g
    maybe you're thinking of #941815579440992337 ?
  • m
    ah
  • m
    😅
  • m
    Thanks
  • g
    lmk if there's anything missing :>
  • m
  • l
    Nice! Now I need to decide whether I want to take a stab at implementing fragment rendering with the corresponding 
    Giraffe.ViewEngine.Htmx
    release... 🤔
  • m
    so, real talk. when is the next version of html coming out?
  • m
    Isn't HTML a "living spec" now?
  • m
    for a living spec, they are quite slow
  • m
    living: I don't think that that word means what you think that that word means
  • m
    I think it means lazy
  • m
    or release whenever the hell we feel like it
  • m
    when will htmx become a standard
  • m
    🤔
  • m
    I'd look to Matrix for a really strong living spec.
  • g
    Interesting ideas. I'm doing basically the same with the exception of item #4.
  • m
    i agree
  • m
    tailwind is nice
  • p
    Hello, I need some help from because I have an issue with HTMX and I can't find a way to explain why it happens : My application is a Razor Pages app, if I click on a button with a bad payload my application respond with HTTP400 and I use a trigger to open a notification (this trigger is calling another endpoint of my app to generate the html for the popup) The problem : if I navigate to the page with my button and I click it, the trigger will call the popup twice. If I refresh the page and click the button the trigger will call the popup once. Here is the trigger code
    Copy code
    javascript
htmx.on('notify', function(e) {
    console.log(e.detail);
    console.log(e);
    htmx.ajax('POST', '/flashmessage', {target:'#notification', swap:'innerHTML', values: e.detail})
})
    Do you have any idea why is this happening or where should I start looking, this is driving me crazy.
  • l
    Do you see those `console.log`s twice? If you do 2 navigations, does it happen 3 times? It sounds like it may be registering that on each navigation. I'm not aware of a way to count event listeners, and MDN's event reference didn't show me anything either. (the most useful one is linked below) You may want to define a global variable that you flip from false to true when you register the listener; since JS isn't multi-threaded, this should be a fine way to ensure that you don't register it multiple times. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
  • l
    If the script to register it is in the 
    body
    of your returned payload, it'll be run each time the response is entered. You may also be able to work around that by putting the call in an external file, then referencing that file in the 
    head
    instead; it isn't re-executed when htmx gets a response.
  • p
    @late-king-98305 thanks, I'm making some progress. Isn't HTMX to refresh after a click on a basic 
    <a>
    link ? It's like there is an instance that is persistent across all navigation...
  • p
    Actually 
    htmx.on
    adds an eventlistener on 
    document.body
    and this events get stacked when clicking on links, the only way to start fresh is to reload the page.
  • p
    ok, the culprit is 
    hx-boost="true"
  • p
    in a very basic app if I had 
    <body hx-boost="true">
    and I navigate I can observe this : 
    first.png
    is the first time i access the page 
    second.png
    is the same page after navigating to another page and navigating back to the first page you can see 
    htmx:load
    has 3 events, but also 
    click
    has 36 events instead of 12... Is this a bug, is this expected and I am misusing 
    hx-boost
    ?
  • l
    You're experiencing intentional behavior; one of the things that makes 
    hx-boost="true"
    speed things up so much is that it doesn't reload the 
    head
    (it will pull out the 
    title
    and replace that). All the scripts and styles remain, so you're really just swapping out the body. (There was a whole discussion about this in this channel over the past weekend, but it was really in-the-weeds.) That's why I recommended moving the script out to an external file, and referencing that in the 
    head
    . It'll initialize the first time, but it won't reinitialize every time. There are a few other ways, but if you're looking for the most straightforward, that would be it. Think about it like this; the typical HTTP request/response transaction is stateless. However, to avoid swapping out the entire page, htmx introduces state in the current browser session. Because of this, you will want to put its initialization, or your custom initialization, outside the part of the page that's being replaced. `script`s in the replaced content will be loaded and executed, which is what you're seeing here. (There are use cases where this behavior is desired.) I hope that makes sense.
1...851852853...1146Latest