[Epskampie]

I recently tried to use htmx because i like the idea. I made a table where you could click lines to expand them. Now, clicking a line would request the subcontent and insert it, easy-peezy. But now i want you to be able to click the line again to close. Hmm, in htmx this means that i’ll have to return a new parent line from the server as well... guess ill make a special template for that. Repeat this a few times and my backend templates were getting so many special cases that i just switched back to jQuery.

Perhaps i just need to learn more “htmx-like” code patterns, but they didn’t come that naturally to me.

[recursivedoubts]

The htmx way to do this would be something like this (assuming a contact model per row):

The summary rows would handle a click to load the detail HTML for the contact, and replace the entire row

  <div hx-get="/contact/42/details" hx-swap="outerHTML" ...>
     ...
  </div>

The detail rows would handle a click to load the summary HTML for the contact, and replace the entire row

  <div hx-get="/contact/42/summary" hx-swap="outerHTML" ...>
     ...
  </div>

So you would flip the row back and forth between summary and detail views. This would involve two templates server side, which seems about right, and would place the logic inside separate and fairly simple server side logic.

Note that here the URLs are encoding the row state, so we are using Hypertext As The Engine of Application State (HATEOAS) without thinking too hard about it.