Issues with the Click to Load example
Closed this issue · 4 comments
This whole mechanism just seems to be wrong.
https://github.com/bigskysoftware/hypermedia-systems/blame/main/book/CH05_htmxPatterns.adoc#L954
For hx-target, does closest even find the last/final tr? The docs make it sound like it would find the whichever tr is closest to... whichever DOM element is currently selected, which could be the first, last or one in the middle? Wouldn't tbody be more appropriate? Though that wouldn't work for the infinite scroll revealed mechanism...
Either way, hx-swap of outerhtml seems inappropriate for appending. If sticking with tr, shouldn't it use afterend so as to append rather than replace? If switching to tbody, use beforeend?
The changes would need to be made in the infinite scroll section further down as well, along with all of the associated language.
If I'm just misunderstanding all of this, perhaps some text to explain why that's the case would be useful so as to prevent confusion in others?
Also, the logic for the next page button should probably account for the situation when there's only 10 contacts - you wouldn't want to show next page in that situation (or at least acknowledge this in the text and say we're ignoring for simplicity). Perhaps also add a mechanism to show the total number of contacts and which ones you're currently viewing? It's a common and useful thing to display and surely well within the capabilities of HTMX
Ah, yes, I see where I'm at least partially wrong. This is all for the button/span below the table and trs. So it would automatically target the last row. I think my contingent point stands though - some text to explain all of this would be very helpful. E.g. "Why are we using tr rather than tbody and beforeend? It would work! But when we implement the infinite scroll, we only want it to be triggered when we reach the last row rather than the table itself. As you can see, HTMX provides a lot of flexibility"
Still, it seems like outerhtml should be changed to afterend. If I'm wrong about this as well, a sentence to explain why would be useful.
And the next page mechanism if there's exactly 10 contacts, as well as displaying the contact total, would still be useful
afterend would preserve the "load more" button after the new contacts have been loaded. Pressing it again would load the same contacts again and insert duplicates.
This is all for the button/span below the table and trs
The button is inside the tr, not below. As per htmx docs, closest returns the innermost matching ancestor, using the .closest() method of elements.
The 'click to load' example on the website was helpful for me.