https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m
    yes, swap style is always first, splitting on space
  • m
    then we run through modifiers
  • m
    1cg EBNF:
    Copy code
    swapSpec = swapStyle swapOptions
swapStyle = "innerHTML" | ...
swapOptions = A bunch of stuff, I wrote the code stop being so judgy, I'm a people person can't you see that?!?
  • h
    I’m trying to htmxify a form that allows the user to add items to their cart. Currently it’s a bunch of 
    <input>
    elements and a "add to cart" button on the form. I’d like to have -/+ buttons next to each article quantity (which wouldn’t be editable directly), and send a request to the server (which would be debounced to prevent sending a large number of requests if the user clicks on the button several times). How would you go on implementing that? I thought I would just add an 
    hx-post
    to each button, but I need to include in the request the id of the product that’s getting changed, along with the quantity (and update the quantity on screen).
  • m
    usually the quantity would be stored server side in some form (a session or in a db) and you would issue an increment or decrement request to a URL that encodes the product id in it:
    Copy code
    html
<button hx-post="/cart/items/1234212312321/increment">
  Increment
</button>
  • h
    Yes the quantity is already stored in a basket that’s in the session. I was thinking on doing something like you proposed but passing the quantity instead of using an increment/decrement URL (which wouldn’t allow me to use a debounce), so I still need a mechanism that would add the quantity to the request, and update the quantity input (maybe I could add it to the response and swap it, but this could feel sluggish for the user)
  • h
    I guess I could do something like this, but maybe there’s a more obvious alternative? - For each product, add -/+ buttons with an 
    hx-post
    attribute with the product id (eg. /basket/add/56) along with an 
    hx-params="none"
    so no parameter is sent with the request. Also add a hidden quantity input for the product - Add an attribute 
    hx-trigger="quantityChanged from:#qty_{{ product.id }}"
    to the -/+ buttons - In the JS code, add a listener on the -/+ buttons, debounce, and call 
    htmx.trigger()
    with a 
    quantityChanged
    event - Still in the JS code, add a listener on 
    htmx:configRequest
    to add the quantity to the request
  • e
    How does 
    defaultSwapStyle
    work here if its gonna pull the first item from the split argument? Is 
    hx-swap="settle:1s"
    valid? I'd expect it to use the default. https://github.com/bigskysoftware/htmx/blob/4419bc4c90b087cfc23c04e54e45f5e071535022/src/htmx.js#L2375
  • m
    if you specify any arguments you also have to specify a swap style, same w/ hx-trigger
  • m
    although I'm willing to consider your suggestion as an improvement!
  • c
    OK fine I jumped on Discord lol. If I have a GraphQL subscription using my ColdFusion server, is there a way to check whether that data has changed using HTMX and then display/update the front end when it does change. Essentially a websockets thing.
  • m
    We have a websocket plugin, but that sounds pretty low level
  • l
    Probably a simple question but I haven't seen it asked in the issues or the discord: what is the recommended way to PUT a form with HTMX? I have a few forms that I'm still using 
    method=POST
    for because the DX very nice, but PUT would be more semantic. Is there a straightfoward way to do this?
  • t
    hx-put
  • s
    I think you should be able to do 
    <form hx-put="/save">
  • l
    It's that simple? I guess I thought that it wouldn't be inherited by the submit button
  • l
    Update: it is that simple, thanks you all
  • h
    Used hs with on click- was trying to tie to a Htmx event but can’t find one that sends until the delay is over
  • h
    Another quick one - is there any quick way to access a data-* attribute on an element when making a request?
  • m
    @hundreds-cartoon-20446 I have some bad news
    h
    b
    • 3
    • 13
  • m
    @ripe-action-67367 trying to cut a 1.8.5 release, getting two failures in the WS extension: https://dev.htmx.org/test/1.8.5/test/
    r
    • 2
    • 8
  • m
    happy to announce the 1.8.5 release of htmx: https://htmx.org/posts/2023-01-17-htmx-1.8.5-is-released/ with big contributions by @ripe-action-67367 @hundreds-cartoon-20446 and @hundreds-camera-24900 and smaller contributions by many others. 🍻
  • a
    1.8.5 comes with 
    hx-nudes
    ?
  • m
    apparently
  • m
    only hotwire was spared
  • m
    I think we all know who was responsible for this...
  • a
    DHH man
  • m
    i'm not suggesting DHH is posting nudes here, that would be childish
  • o
    But not entirely false..
  • r
1...990991992...1146Latest