https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m
    mmm, i think this is a combination of boosting and a non-body target
  • m
    seems like a bug to me
  • m
    boosting should always scroll to the top of the page like a normal link or form submission
  • b
    I thought hx-boost was to progressively enhance a form to use HTMX. So to use the form's default "action" and "method" in order to construct a HTMX request (so you don't need to explicitly define hx-get or hx-post). I was expecting the rest of the behavior to be the same. But from what I read from you, it seems that I misinterpreted the documentation. Thanks for the answers.
  • m
    scrolling to the top of the page is part of that progressive enhancement in that it acts like a normal submission does
  • m
    but it looks like if you override the target we scroll to that rather than to the top of the page
  • m
    which I think is a bug
  • m
    or is at least bug-like
  • r
    Just wanted to say - I'm making a hobby/personal website and found HTMX and Hyperscript a couple of days ago. I've been completely blown away by how intuitive everything is. My goal for the site was to start with "static pages" then "blog-style pages fed from a database" and then an event-driven SPA. I was absolutely dreading the SPA work, but I'm genuinely enjoying it. Thank you.
  • p
    Morning. I want to poll an endpoint and only update an attribute on an element (not the whole thing). Anyone thinking of a way to do this ?
  • n
  • p
    Ill take a look
  • m
    great to hear!
  • m
    What is the goal here?
  • p
    Updating an attribute on an element. The endpoint is returning a simple value, not html. à
  • a
    I have a an inline editing pattern for a single text input like this: 
    <div hx-trigger="keydown[key=='Escape']" hx-get=".."><input hx-trigger="focusout, keydown[key=='Enter']" hx-post=".."/></div>
    . The idea is to have a quick single text input that posts its value when it loses focus or enter is pushed in it, and when the user presses Escape, the edit should be canceled (and the whole div swapped out for the non-edit-input fragment). But the problem with this is that, when I push Escape, the GET is called, but then the POST is called too (presumably from the focus out).
  • p
    I was hoping for something like 
    htmx.ajax('GET', '/a', {swap: "none"})
    then setAttribute with whatever value I got
  • r
    I could be wrong, but since you're not trying to return HTML I think you'd be better off with the Hyperscript side of things. Something like combined with ? The HTMX solution would be to expand the scope of what is returned by the endpoint so it includes the necessary HTML with the desired attribute.
  • m
    are you able to return the entire element w/ the updated attribute? you could use a merge swap or write your own swap strategy, but at that point I wonder if just issuing a 
    fetch()
    and being done with it is less complicated
  • p
    I think at that point I'll go the 
    fetch()
    way. It's a small web-component that already does some stuff, and updating the should also add an attribute to the 
    body
    . Doing everything server side and updating the whole thing every seconds is a bit too much
  • m
    I would like to eventually support a 
    js:
    prefix in the swap that allows you to call an arbitrary javascript function
  • m
    Copy code
    html
<button hx-get="/whatever" 
        hx-swap="js:doSomething(response)">
  Do Something
</button>
  • p
    A pretty cool idea!
  • m
    we support the 
    js
    prefix in other places
  • a
    This one is a real stumper. I've toyed around with different things, but I'm not sure how to solve this without resorting to writing js.
  • w
    I'm getting a 
    TypeError: ajaxHelper(...) is undefined
    error when returning a response with an 
    HX-Location
    header. Any ideas? EDIT: Seems to be related to using HX-Location to redirect to a view that also returned a HX-Location redirect. I have a 
    checkout/
    URL that determines which step of the process they are in and uses HX-Location to redirect to 
    checkout/<step>
    . There's also a way for the user to log in on the checkout page, and logging in redirected them to the 
    checkout/
    URL that then redirected to 
    checkout/payment
    . If I simply have the login view use HX-Location to 
    checkout/payment
    , it works. 🤷
  • m
    hard to do without scripting, a more "htmx-y" way would be a click-to-edit pattern. If you are willing to script, not so bad though. saving on focus out might confuse users though...
  • m
    here is my best implementation given the time limit I set for myself: https://codepen.io/1cg/pen/LYrxYVd?editors=1011
  • m
    Copy code
    html
<input _="on focus or htmx:afterRequest
              set :initial_value to my value
          on keyup[key=='Escape'] 
              set my value to the :initial_value then 
              blur() me"
       hx-post="/sample"
       hx-trigger="change, keyup[key=='Enter']"
       hx-target="next output"
       type="text" name="foo" value="asdf"/>
<output>--</output>
  • m
1...896897898...1146Latest