Disable buttons and show hourglass over row (htmx)

user_633961 0
Viewed 605

I use htmx to updated snippets of my page via html-over-the-wire

This works fine:

  <table>
    <tr id="offer_2">
     <td>Sun 27.12</td>
     <td>Spinach Lasagna</td>
     <td>5.00€</td>
     <td>1</td>
     <td>
      <button id="2" hx-post="/offer/2/add_offer_to_order" 
         hx-target="#offer_2" hx-swap="outerHTML">+</button>
      <button id="2" hx-post="/offer/2/delete_offer_from_order" 
         hx-target="#offer_2" hx-swap="outerHTML">-</button>
     </td> 
    </tr> 
   </table>

.... after the user pushed the + or the - button, the corresponding row gets updated with a new version from the server.

I would like to give the user some visual feedback:

  • the buttons should be disabled during the ajax-call
  • there should be a hourglass turning above the row which gets updated.
htmx javascript
1 Answers

You can use the hx-indicator attribute to accomplish this:

https://htmx.org/attributes/hx-indicator/

This will add the class 'htmx-request' to the specified element while the htmx request is in flight.

So you would likely do something like this (taking advantage of the "closest" syntax in htmx):

<td hx-indicator="closest tr">
    <button id="2" hx-post="/offer/2/add_offer_to_order" 
        -target="#offer_2" hx-swap="outerHTML">+</button>
    <button id="2" hx-post="/offer/2/delete_offer_from_order" 
        hx-target="#offer_2" hx-swap="outerHTML">-</button>
</td>

And then create a CSS style for table rows when an htmx request is in flight:

tr.htmx-request {
    transition: all 500ms ease-in;
    background-color:red; // for example
}

Note that I'm just using a red background as an example here, for dramatic effect. You would certainly want some different styling.

user_142881400
Related