https://htmx.org logo
Powered by
# htmx-general
  • m
    Hi! Recently found out about HTMX. Wonderful library! I probably have an easy usecase but I am stuck a bit. The html is always put in the first I expected it to always just use the closest selector element. But closest and find also dont work. Is there something to select the closest neighbour?
    Copy code
    <div>
    <a hx-get="/endpoint" hx-target="p.success">Click me</a>
    <h5>Title 1</h5>
    <p class="success">No information</p>
</div>
<div>
    <a hx-get="/endpoint2" hx-target="p.success">Click me</a>
    <h5>Title 2</h5>
    <p class="success">No information</p>
</div>
    Thanks!
  • t
    adding an id ( or dynamic id) to p would be the easiest I think. You can also target the whole div and replace the content each time ?
  • r
    Hi guys ! just to be sure innerHTML is the default but for hx-swap-oob elements the default is outerHTML right ? I did a mess but I think it’s solved now 😅😅😅
  • m
    that's right
  • r
    thanks mate
  • m
    Thanks.
  • m
    It's possible to start getting data from server for a couple of seconds after triggering by click??
    Copy code
    <div>
    <a hx-get="/endpoint" hx-trigger="click, then every 5s (for 120s)" hx-target="p.success">Click me</a>
    <h5>Title 1</h5>
    <p class="success">No information</p>
</div>
  • m
  • m
    that would be better implemented in hyperscript
  • m
    Copy code
    html
<div>
    <a hx-get="/endpoint" hx-trigger="request" hx-target="p.success"
_="on click trigger request
     repeat 24 times
       wait 5s then trigger request">Click me</a>
    <h5>Title 1</h5>
    <p class="success">No information</p>
</div>
  • m
    almost like they were designed to work together
  • m
    🙂
  • m
    if you want the button disabled while the requests are in process:
    Copy code
    html
<div>
    <a hx-get="/endpoint" hx-trigger="request" hx-target="p.success"
_="on click trigger request
     add @disabled
     repeat 24 times
       wait 5s then trigger request
     end
     remove @disabled">Click me</a>
    <h5>Title 1</h5>
    <p class="success">No information</p>
</div>
  • m
    @User ☝️ a good motivator for allowing async listening for a cancel event
  • b
    Is there a way to get 
    hx-boost
    to display the response HTML for responses with a 500 status code? Edit: I just found this comment in the source explaining that I can listen on 
    htmx:beforeSwap
    and set `shouldSwap`: https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L2501-L2504 I wonder if this is a common use case though, where I really just want to use HTMX as an enhancement on an app that's always going to respond with full-page HTML views.
  • h
    yes it's very common - it's built into django-htmx
  • h
  • h
    if you're not using that lib you'll have to do yourself, although that snippet is fairly universal
  • h
    I think there's only one django specific piece
  • m
    I just realized we can really trick this example out:
    Copy code
    html
<div>
    <a hx-get="/endpoint" 
       hx-trigger="request" 
       hx-target="p.success"
       _="on click trigger request
            show the next <button/>
            add @disabled
            repeat 24 times
              wait for a cancel or 5s
              if the result's type is 'cancel' 
                break
              otherwise
                trigger request
              end
            end
            hide the next <button/>
            remove @disabled">Click me</a>
    <button style="display:none"
            _="on click send cancel to the previous <a/>">
       Cancel
    </button>
    <h5>Title 1</h5>
    <p class="success">No information</p>
</div>
  • m
    haven't verified this, but remembering all the functionality we have in hyperscript, you can actually break out of a wait early via an event using this syntax, which would allow a cancellation
  • m
    hyperscript is pretty cool guy
  • m
    ah, we don't have 
    break
    yet, just 
    continue
    will need to rework (making a jsfiddle)
  • m
    ok, found a bug in the 
    wait
    command, fixed locally
  • m
    the above will work w/ the next release of hyperscript
  • g
    This is amazing. Well done!
  • m
    I'm shocked it works, but I have a jsfiddle against my local hyperscript and... it works
  • m
    if there are any gophers here, we have created a new #929014829212123156 channel in anticipation of a preference cascade in the go web development community
  • m
  • n
    Well that's cool! Now I need a fastapi-htmx channel 😂
1...510511512...1146Latest