bigskysoftware / bigskysoftware/htmx

my temp fix for Troublesome Tables and lists

Open
#3,316 7 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.