https://htmx.org logo
Powered by
# htmx-general
  • m
    do people find inheritance difficult to manage?
  • r
    (btw hx-boost is such a killer feature, loved that feature in turbo drive and so happy to have it simple in htmx too)
  • r
    was about to say, more often than not, I enjoy the inheritance. BUT I can see scenarios where it could suck
  • r
    Maybe in the short term: Allow it to be turned off as a config option, see how it goes ?
  • r
    Also just wanted to note, this is a suuuuper common new person question. Not sure how to add this to the docs yet but`hx-target` and 
    hx-boost
    should get some special attention in the quickstart or something.
  • c
    Umm but I still need a server side path that returns a piece of the the form as the response, right?
  • r
    Nope, just the full page, can be the exact same endpoint
  • r
    hx-target
    will swap the right thing for you.
  • c
    Have to try then. Can I add the logic to change the name of the input?
  • r
    Yup, it'll swap anything you change in the new page. So if you submit with htmx with 
    <input type="hidden" name="stage" value="2" />
    and regenerate the form based on that, you're in business.
  • c
    ok, will give it a try. Thank you
  • r
    Copy code
    html
<form action="/signup" method="post"
hx-post="/signup" hx-target="body" hx-swap="outerHTML" hx-push-url="true" >
    Also this is a nice little trick, it'll swap everything in body, and the nice side effect, redirects will be appropriately swapped into the browser URL bar if you redirect (300 code, 302, 304, etc) at the very end upon success. No fragments needed, just return the whole page.
  • r
    Btw @mysterious-toddler-20573 these patterns are all documented at: . Pretty much ready.
  • r
    Also was wondering, do we want to encourage kebab case or camel? Used kebab there because hotwire uses it, but noticed htmx supports both.
  • s
    Just dug into this a bit more. Htmx creates a snapshot of the page by calling innerHTML on the history element. However, the html of an input is not changed when your user updates its value. See console output here
  • s
    But if I set the html attribute, then it works
  • s
    I see there's an event that gets triggered before the history is snapshotted. I'll use that to run an update on all inputs to set the html attribute. Would other people be interested in having this be part of htmx default behavior though?
  • p
    What is the recommended way of dealing with failure of a server request that htmx does? Suppose I do an endless scroll implementation and the call to get the next batch of results fails? How are people handling this in their htmx-powered applications?
  • p
    The documentation states: > In the event of an error response from the server (e.g. a 404 or a 501), htmx will trigger the htmx:responseError event, which you can handle. > > In the event of a connection error, the htmx:sendError event will be triggered. I'd like to see an example of how to do this in practise. I guess you need to add a bit of JavaScript to handle the errors, but an example is usually worth a 1000 words of manual 🙂
  • r
    So there's multiple ways to approach this. 1. HTMX will just return blank on error codes. So if that's acceptable, just let it append nothing. 2. Have the server return an error message, it'll just get swapped in. 3. vanilla js : 
    <script>document.addEventListener("htmx:responseError", ev=>{ alert(ev) })</script>
    4. hyperscript: 
    _="on htmx:responseError ....."
  • p
    Ah, option 3 is probably what I am after. So I could just install a global even listener. Will this also be triggered for a timeout in case the server "hangs" ?
  • r
    Good question. You can find out the exact event by using 
    monitorEvents(thing)
  • r
    in chrome console. 
    thing
    being the element htmx is attached to
  • r
  • r
    it may also just be the standard 
    timeout
    event.
  • p
    https://github.com/bigskysoftware/htmx/issues/102 states that there should be a timeout event judging by the comment of @mysterious-toddler-20573 , but https://htmx.org/reference/#events does not list any event related to timeouts
  • p
    What is the timeout that htmx uses and can it be changed? If so, how?
  • p
    I found https://htmx.org/attributes/hx-request/ but it does not seem to work, so probably I am doing something wrong. I have declared this in my HTML:
    Copy code
    <button hx-swap="outerHTML" hx-request="\"timeout\":100" class="btn" hx-get="/refresh-button3/2" hx-target="#device-info-2" hx-indicator="#device-info-2">Refresh
            </button>
    I throttled my network speed in Chrome to make sure the request takes quite some time. Still I get no 
    timeout
    event.
  • r
    "\"timeout\"
    gotta remove those extra quotes for one
  • c
    Yes, before hx-disinherit it was the bane of my htmx life! The problem starts cause I love to use lotsa partials/fragment in templates, so in a large-ish project whith a ton of partials someone adds an hx-target in a partial/fragment and all of a sudden, stuff that used to work now breaks. Personally I think inheritance should be opt-in rather than opt out ( a la principle of least surprise and what-not).
1...689690691...1146Latest