禁用按钮并在行上显示沙漏 (htmx)

如何解决禁用按钮并在行上显示沙漏 (htmx)

我使用 htmx 通过 html-over-the-wire

更新我的页面的片段

这很好用：

  <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>

.... 在用户按下 + 或 - 按钮后，相应的行将更新为来自服务器的新版本。

我想给用户一些视觉反馈：

• 在 ajax 调用期间应禁用按钮
• 应该有一个沙漏在更新的行上方转动。

解决方法

您可以使用 hx-indicator 属性来完成此操作：

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

这将在 htmx 请求进行中时将类 'htmx-request' 添加到指定元素。

所以你可能会做这样的事情（利用 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>

然后在 htmx 请求进行中时为表格行创建 CSS 样式：

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

请注意，我在这里仅使用红色背景作为示例，以达到戏剧效果。您肯定会想要一些不同的样式。