Bulk Update

This demo shows how to implement a common pattern where rows are selected and then bulk updated. This is accomplished by putting a form around a table, with checkboxes in the table, and then including the checked values in PUT's to two different endpoints: activate and deactivate:

<div hx-include="#checked-contacts" hx-target="#tbody">
  <a class="btn" hx-put="/activate">Activate</a>
  <a class="btn" hx-put="/deactivate">Deactivate</a>
</div>

<form id="checked-contacts">
    <table>
      <thead>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Email</th>
        <th>Status</th>
      </tr>
      </thead>
      <tbody id="tbody">
        <tr class="">
          <td><input type='checkbox' name='ids' value='0'></td>
          <td>Joe Smith</td>
          <td>joe@smith.org</td>
          <td>Active</td>
        </tr>
        ...
      </tbody>
    </table>
</form>

The server will either activate or deactivate the checked users and then rerender the tbody tag with updated rows. It will apply the class activate or deactivate to rows that have been mutated. This allows us to use a bit of CSS to flash a color helping the user see what happened:

  .htmx-settling tr.deactivate td {
    background: lightcoral;
  }
  .htmx-settling tr.activate td {
    background: darkseagreen;
  }
  tr td {
    transition: all 1.2s;
  }

You can see a working examle of this code below.

Server Requests : 2 ↑ Show
PUT /deactivate
parameters: {"ids":["0","2","3"]}
Response 

<tr class="deactivate">
                  <td><input type='checkbox' name='ids' value='0'></td><td>Joe Smith</td><td>joe@smith.org</td><td>Inactive</td>
                </tr>
<tr class="">
                  <td><input type='checkbox' name='ids' value='1'></td><td>Angie MacDowell</td><td>angie@macdowell.org</td><td>Active</td>
                </tr>
<tr class="deactivate">
                  <td...

Demo

Select Rows And Activate Or Deactivate Below

Name Email Status
Joe Smith joe@smith.org Inactive
Angie MacDowell angie@macdowell.org Active
Fuqua Tarkenton fuqua@tarkenton.org Inactive
Kim Yee kim@yee.org Inactive

Activate Deactivate