htmx
htmx copied to clipboard
bigskysoftware
Targeting Issue in Infinite Scroll Example
I've implemented the Infinite Scroll example and added the ability to "See More" for each item. When you click an item it shows the details by replacing the contents of a div to the right. Everything works... except for rows that have the hx-trigger="revealed" hx-swap="afterend" attached to them. When you click their "Show More" they don't replace the content, but rather append. Here's a short video (not the rows with the triggers are styled with a red background to highlight them).
https://github.com/bigskysoftware/htmx/assets/548178/0bce5d6f-5068-40d6-90a2-255c83a73fb5
Here's the initial markup:
<div class="row">
<div class="col-md-8">
<table class="table table-striped">
<tr>
<th>Full Name</th>
<th>Gender</th>
<th>Connection Status</th>
<th>Actions</th>
</tr>
<tr hx-get="/Webhooks/Lava.ashx/GetPeople2?page=1" hx-trigger="load" hx-swap="outerHTML">
</tr>
</table>
</div>
<div class="col-md-4">
<div id="person-details-modal">
</div>
</div>
</div>
And this is the HTML table with the content merged in:
<table class="table table-striped">
<tbody><tr>
<th>Full Name</th>
<th>Gender</th>
<th>Connection Status</th>
<th>Actions</th>
</tr>
<tr class="">
<td>
<div class="d-flex align-items-center">
<img class="avatar mr-2" src="/GetAvatar.ashx?PersonId=21">
<div>
<strong>Pete Foster</strong><br>
<small>Age: 50</small>
</div>
</div>
</td>
<td>Male</td>
<td>Member</td>
<td>
<button class="btn btn-xs btn-primary" hx-get="/Webhooks/Lava.ashx/GetPerson2?PersonIdKey=RGKBqjmW8b" hx-target="#person-details-modal" hx-trigger="click">Show More</button>
</td>
</tr>
<tr class="">
<td>
<div class="d-flex align-items-center">
<img class="avatar mr-2" src="/GetAvatar.ashx?PersonId=22">
<div>
<strong>Pamela Foster</strong><br>
<small>Age: 50</small>
</div>
</div>
</td>
<td>Female</td>
<td>Member</td>
<td>
<button class="btn btn-xs btn-primary" hx-get="/Webhooks/Lava.ashx/GetPerson2?PersonIdKey=pAZB8dBngD" hx-target="#person-details-modal" hx-trigger="click">Show More</button>
</td>
</tr>
<tr class="">
<td>
<div class="d-flex align-items-center">
<img class="avatar mr-2" src="/GetAvatar.ashx?PersonId=1066">
<div>
<strong>Fañ Gárcia</strong><br>
<small>Age: </small>
</div>
</div>
</td>
<td>Male</td>
<td>Visitor</td>
<td>
<button class="btn btn-xs btn-primary" hx-get="/Webhooks/Lava.ashx/GetPerson2?PersonIdKey=pAZB82Rlng" hx-target="#person-details-modal" hx-trigger="click">Show More</button>
</td>
</tr>
<tr class="">
<td>
<div class="d-flex align-items-center">
<img class="avatar mr-2" src="/GetAvatar.ashx?PersonId=44">
<div>
<strong>Wendy Gilbert</strong><br>
<small>Age: 46</small>
</div>
</div>
</td>
<td>Female</td>
<td>Prospect</td>
<td>
<button class="btn btn-xs btn-primary" hx-get="/Webhooks/Lava.ashx/GetPerson2?PersonIdKey=Kewld30moa" hx-target="#person-details-modal" hx-trigger="click">Show More</button>
</td>
</tr>
<tr class="">
<td>
<div class="d-flex align-items-center">
<img class="avatar mr-2" src="/GetAvatar.ashx?PersonId=43">
<div>
<strong>Brian Gilbert</strong><br>
<small>Age: 48</small>
</div>
</div>
</td>
<td>Male</td>
<td>Prospect</td>
<td>
<button class="btn btn-xs btn-primary" hx-get="/Webhooks/Lava.ashx/GetPerson2?PersonIdKey=vpLPbRPR4n" hx-target="#person-details-modal" hx-trigger="click">Show More</button>
</td>
</tr>
<tr class="">
<td>
<div class="d-flex align-items-center">
<img class="avatar mr-2" src="/GetAvatar.ashx?PersonId=31">
<div>
<strong>Tim Greggs</strong><br>
<small>Age: 10</small>
</div>
</div>
</td>
<td>Male</td>
<td>Member</td>
<td>
<button class="btn btn-xs btn-primary" hx-get="/Webhooks/Lava.ashx/GetPerson2?PersonIdKey=QxnBwAlgaW" hx-target="#person-details-modal" hx-trigger="click">Show More</button>
</td>
</tr>
<tr class="">
<td>
<div class="d-flex align-items-center">
<img class="avatar mr-2" src="/GetAvatar.ashx?PersonId=30">
<div>
<strong>Lorraine Greggs</strong><br>
<small>Age: 36</small>
</div>
</div>
</td>
<td>Female</td>
<td>Member</td>
<td>
<button class="btn btn-xs btn-primary" hx-get="/Webhooks/Lava.ashx/GetPerson2?PersonIdKey=7QVlZrlZW0" hx-target="#person-details-modal" hx-trigger="click">Show More</button>
</td>
</tr>
<tr class="">
<td>
<div class="d-flex align-items-center">
<img class="avatar mr-2" src="/GetAvatar.ashx?PersonId=32">
<div>
<strong>Jordan Greggs</strong><br>
<small>Age: 9</small>
</div>
</div>
</td>
<td>Female</td>
<td>Member</td>
<td>
<button class="btn btn-xs btn-primary" hx-get="/Webhooks/Lava.ashx/GetPerson2?PersonIdKey=Z9NB6Wmo0Q" hx-target="#person-details-modal" hx-trigger="click">Show More</button>
</td>
</tr>
<tr class="">
<td>
<div class="d-flex align-items-center">
<img class="avatar mr-2" src="/GetAvatar.ashx?PersonId=29">
<div>
<strong>Bob Greggs</strong><br>
<small>Age: 36</small>
</div>
</div>
</td>
<td>Male</td>
<td>Member</td>
<td>
<button class="btn btn-xs btn-primary" hx-get="/Webhooks/Lava.ashx/GetPerson2?PersonIdKey=y2Rl35Bj4V" hx-target="#person-details-modal" hx-trigger="click">Show More</button>
</td>
</tr>
<tr hx-get="/Webhooks/Lava.ashx/GetPeople2?page=2" hx-trigger="revealed" hx-swap="afterend" class="last-row" data-hx-revealed="true">
<td>
<div class="d-flex align-items-center">
<img class="avatar mr-2" src="/GetAvatar.ashx?PersonId=24">
<div>
<strong>Sam Hanks</strong><br>
<small>Age: 28</small>
</div>
</div>
</td>
<td>Male</td>
<td>Member</td>
<td>
<button class="btn btn-xs btn-primary" hx-get="/Webhooks/Lava.ashx/GetPerson2?PersonIdKey=GXaBRGmrd6" hx-target="#person-details-modal" hx-trigger="click">Show More</button>
</td>
</tr><tr>
<td>
<div class="d-flex align-items-center">
<img class="avatar mr-2" src="/GetAvatar.ashx?PersonId=41">
<div>
<strong>Sean Hansen</strong><br>
<small>Age: 35</small>
</div>
</div>
</td>
<td>Male</td>
<td>Prospect</td>
<td>
<button class="btn btn-xs btn-primary" hx-get="/Webhooks/Lava.ashx/GetPerson2?PersonIdKey=6bEmjzm3Ag" hx-target="#person-details-modal" hx-trigger="click">Show More</button>
</td>
</tr>
....
</tbody></table>
I did notice in rows that work the HTMX events have a "beforeCleanupElement".
Where as the ones that append don't.
Any ideas what I might be doing wrong?
in the documentation of hx-swap it says
The
hx-swapis inherited and can be placed on a parent element
This means that the "show more" button also has the hx-swap="afterend" of the table row.
It might be fixed if you add hx-swap="innerHTML" (the default behaviour) to each of the "show more" buttons to override the inherited value.
