Table instantiation (rows above table header when ClientLoad.FromDocument)

[mawasak]

Hi,
My table rows are above table header when I use ClientLoad.FromDocument.

I use Adam article https://forums.websharper.com/blog/84145

My modifications are here
https://github.com/mawasak/websharper-table

and some screenshots:
Code in Main.fs

Templates in Main.html

packages.config (newer versions than in mentioned article)

Without , ClientLoad.FromDocument, ServerLoad.WhenChanged

Regards,
Mariusz

[Jand42]

Hello,

this seems like something that should have been fixed by 1298d14 but your version of WS is later.

Have you tried latest release (4.4)? Can you push the entire sample project so its easy to reproduce? Thanks a lot!

[mawasak]

I don't try 4.4 yet.
I pushed full project here https://github.com/mawasak/websharper-table a moment ago

Write if you need more info.

[mawasak]

full packed solution with dlls - https://github.com/mawasak/websharper-table/blob/master/websharper-table-solution.7z

[Jand42]

@mawasak Thanks! I will look into it soon.

[Jand42]

@Tarmil The html as returned by the server contains this: <tbody><div ws-replace="MyTableHole"></div></tbody>, so a ws-hole is transformed to a child element with ws-replace. My guess that the problem lies in that it is a <div>, independent of the containing element, it should be <tr> here.

[mawasak]

Code returned from server is like @Jand42 said, but in WebSharper.UI.Client.Templates.LoadNestedTemplates (root: Element) baseName
root contains

<div ws-replace="MyTableHole"></div><table class="table table-bordered">

so MyTableHole div is before table tag (tbody is empty)

</thead> <tbody></tbody> </table></div>

[Tarmil]

This is indeed a similar issue to the one fixed by 1298d14. The common problem is that some elements can only have certain specific children (such as <table> can only have <tbody> or a couple others), so if that's not the case then the browser alters the DOM. 1298d14 fixes the way we output nested ws-(children-)templates to account for this; the present issue is about ws-replace and needs a similar fix. I'll have it ready soon.

[Tarmil]

Reopening as this issue still happens with SVG. Example:

<svg>
  <g>
    <circle ws-replace="MyCircle" />
  </g>
</svg>

incorrectly becomes:

<svg>
  <g>
    <div ws-replace="MyCircle" />
  </g>
</svg>