https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • s
    @mysterious-toddler-20573 There is a bug in htmx/demo.htmx.org You can see it in action here: https://codepen.io/checketts/pen/bGjMBeP?editors=1001 In debugging, I see that the XHR.onload is getting called twice by the mock-requests (not sure why), so the first call works (swapping the element), but the second call tries to swap the outerHTML, but at this point the element is no longer in the DOM and can't be swapped by its outerHTML. In issueAjaxRequest:2644 it check if the element is in the body and returns if it isn't. Perhaps that guard also should exist in the 
    onload
    around line 2882.
  • b
    Just deleted 530 lines of javascript 🙂
  • a
    Didn’t realise 
    enterKey
    was recognised, I’ve used 
    keyup[key=='Enter']
  • b
    Thanks but I'm afraid that doesn't work either. It seems once I start clicking around or using the DELETE, arrow keys, etc. HTMX triggers regardless and sends the HTTP PATCH request. Maybe I need to do something in addition to just listening for the specific key event?
  • m
  • m
    This works for me @busy-action-85810 👆
  • m
    if the input is in a form it may be triggering a non-htmx request on the form, you'll need to catch the event and prevent the default action from happening
  • a
    Was also playing with this example when 1cg submitted the above, in case it helps: https://codepen.io/elliottinvent/pen/PoBeXom
  • a
    HTMX gets mentioned here, from what I see on the episode notes: https://changelog.com/jsparty/258
  • a
    haven't listened to it yet
  • m
  • h
    HTMX also got covered in this talk by John D Wells at Craft's Dot All conference last year: https://craftcms.com/events/dot-all-2022/sessions/a-practical-guide-to-html-over-the-wire
  • e
    I love locality of behavior. but. Is there a way to wire up a very long form to submit on a change in any input without explicitly adding an 
    hx-trigger
    to every input? I could do that, but I'm wondering if there is a way to do it on the 
    <form/>
    element instead.
  • m
    hx-trigger='input'
    on the form should work, the event will bubble up to it
  • b
    is this behaviour covered in any of the examples? I kind of missed that in this explicity. Would not hurt to have a bigger form example than https://htmx.org/examples/edit-row/ maybe where this is promoted?
  • r
  • p
    I've used 
    keydown[key=='Enter'&&!shiftKey]
    to trigger in a text area when Enter without the SHIFT key is pressed, so 
    keyup[key=='Enter']
    should work. I think 
    enterKey
    didn't work for me.
  • a
    Copy code
    htmx.on('htmx:responseError', function(evt) {
    is there a way to retry evt.detail.xhr inside this event?
  • b
    Thanks. That works for me too. I'm wondering if the problem I'm experiencing has to do with the way I first click on the 
    <span>
    to trigger HTMX to load the 
    <input>
    which, once swapped, then listens for the 
    Enter
    keyup event. In case it helps, here's the source code (using ERB) to first render the "task" partial: https://github.com/bkuhlmann/hemo/blob/main/slices/main/templates/tasks/_task.html.erb#L10 ...and here is "edit" template what is swapped in which then listens for the 
    Enter
    keyup event: https://github.com/bkuhlmann/hemo/blob/main/slices/main/templates/tasks/edit.html.erb#L20-L26
    a
    m
    • 3
    • 22
  • m
    not that I am aware of, but there probably should be!
  • b
    Hi, What's your approach when trying to add something like google maps to your app? I'm struggling with figuring out how to add a script and init function that will work and not load it on all requests to the page with a map.
  • g
    sorry if im missing it, but is there any technique for smoothly handling an error when the server is offline?
  • g
    like having some html ready in page for a true 500
  • b
    My favourite part is when @mysterious-toddler-20573 is called a "mad scientist" at minute 19:45 😂
  • m
    can you host the map in one section and target requests for another section so the map stays unchanged?
  • r
    How would you guys handle a debounce on a form submit? Kinda seems like something that html should offer
  • b
    use the 
    delay
    modifier on 
    hx-trigger
  • r
    thanks
  • r
    But I want to have the debounce after the first click
  • r
    if I put hx-trigger="submit delay:5000ms"
1...9989991000...1146Latest