https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • h
    Hey guys, I need a help with htmx. Is it fine to write my question here?
  • s
    Generally, yes 🙂 If the issue is very specific to your backend stack only, you might get a more tailored reply in its dedicated channel (if one exists).
  • h
    Not that specific I guess, thanks! So I have div with the elements inside and hx-get attribute placed on this div as well. Can I make an exclusion for one of the elements inside this div so it ignore hx-get?
  • s
    Yes, you should be able to use 
    hx-disinherit
    for that - https://htmx.org/attributes/hx-disinherit/
  • h
    I tried hx-disable, hx-preserve, hx-disinherit but they won't do the thing
  • s
    Hm 🤔
  • h
    oh, maybe I'm doing something wrong, let me try again
  • s
    It sounds like you might need 
    hx-disinherit="hx-get"
    , at the very least, on your child elements inside the div.
  • h
    I had the same logic here but it's not working the way I expect, here's a code
  • s
    What do you expect to happen vs. what IS happening?
  • h
    When I click #link element inside of the div I get the call from the divs hx-get which I do not want to get
  • s
    Hmm, OK. Does 
    hx-disinherit="*"
    work?
  • h
    nope
  • s
    Is that attribute definitely present in the generated markup?
  • h
    The one I click, yes, for sure. I'll try placing it above the if statement to see if that works
    s
    b
    • 3
    • 40
  • c
    thats my point, many of you are ok with tailwind which touches your css but not if it would extract out your js. This would be really simple nothing hard to understand or learn, you also don't need to touch your build infra, just give the compiler the path where to put the JS and done.
  • h
    Another issue I have with htmx is that I want only one hx-get issue be active at one time. For example: I click element with hx-get attr and get what I ask for. When I click another element with hx-get attr as well - I want the previously opened one to be closed but I get two of the opened ones instead. My best pick was to use hx-sync="this:replace" but this doesn't work. I opened up a thread on stackoverflow 10 days with the code to be more specific: https://stackoverflow.com/questions/75550355/replace-hx-get-with-the-next-hx-get-request
  • m
    both also share "locality of behavior": https://htmx.org/essays/locality-of-behaviour/
  • m
  • m
    maybe we should put a try/catch around that?
  • m
    it sounds like you want to use hx-sync, but you need to have all the requests synchronizing using the same element
  • m
    hx-sync uses a DOM element as a synchronization point, so if you want to coordinate requests from two elements, they need to point to the same DOM element.
  • h
    Sound like impossible in my case or at least I can not see that possible because I have multiple '#projects' coming from a 'for loop'. That's why I've been trying to stick with logic to cancel every previous hx-get request in favor of the future one. Is that achievable?
  • m
    Can you put an hx-sync on a parent element of all the elements making requests?
  • h
    Sure, will try now
  • m
    Stick a 
    hx-sync="this:replace"
    on a parent element of all the elements you want synchronized
  • m
    hx-sync should be inherited
  • m
    and the children should all use that parent element to synchronize requests
  • m
  • h
    I tried that, doesn't work as I expect it. The problem is related to a 'for loop'. Because of this loop I'm having multiple 'projects' listed on the page while there's only one '#project' in the html itself. If I use hx-sync="this:replace" on the parent element - replace is coming instead of all 'projects', not a particular one I'm trying to change. A simplified version of that loop is on the screenshot.
1...105710581059...1146Latest