bigskysoftware / bigskysoftware/htmx
my temp fix for Troublesome Tables and lists
- Dominant language
- JavaScript
- Stars
- 49.4k
- Forks
- 1.7k
- Avg merge
- 3d 22h
- Merged PRs (30d)
- 30
Description
hello am using WS extension
in this example i sumbit form with adding new group name and on response i reset the form and add new added group to table body
the request form and table :
```
Add Group
Group
Members
```
the response :
```
Add Group
new_group
```
this example isn't working the form tag get swapped but the tr tag or similar tags not getting swapped so :
1- am asking if someone can explain why it's not working and how to fix it
2- i had to do the standalone tags manual update by my self so created manual update function that work with this example to help me until i got more robust solution
here's js file contain the function
1 - let htmx do the swap normally complete his swap flow
2 - after that i extract the template tag from response
3 - swap it manually
```
document.body.addEventListener('htmx:wsAfterMessage', function (evt) {
const html = evt.detail.message;
if (html.includes(' {
const extSel = template_tag.getAttribute('data-manual-update') || template_tag.getAttribute('hx-swap-oob');
if (!extSel) return;
const nodes = Array.from(template_tag.content.childNodes).filter(n => n.nodeType === Node.ELEMENT_NODE);
nodes.forEach(node => manualUpdate(node, extSel));
});
}
function manualUpdate(node, extSel) {
const [position, selector] = extSel.split(/:(.+)/);
const container = document.querySelector(selector);
if (!container) {
console.error('manualUpdate: container not found for', selector);
return;
}
const clone = node.cloneNode(true);
switch (position) {
case 'beforebegin': container.before(clone); break;
case 'afterend': container.after(clone); break;
case 'afterbegin': container.prepend(clone); break;
case 'beforeend': container.append(clone); break;
case 'replace': container.replaceWith(clone); break;
default:
console.warn('manualUpdate: unknown position', position);
}
}
```
Contributor guide
Assessment
This issue has not been assessed yet.