DOMException: The supplied node is incorrect or has an incorrect ancestor for this operation.
danielbeeke opened this issue · comments
Hi Andrea,
I have a strange bug. Maybe it is because of nesting things in the wrong way.
It happens at: http://rdf-form.danielbeeke.nl/
If you scroll down till you see a form.
There is a field Author.
If you empty it, type something that it would not find,
click on Add sghfghdg as text without reference..
Then it will crash with:
DOMException: The supplied node is incorrect or has an incorrect ancestor for this operation.
Source code:
https://github.com/danielbeeke/rdf-form/blob/master/src/RdfForm.ts
https://github.com/danielbeeke/rdf-form/blob/master/src/FormElements/FormElementBase.ts
I have not yet used html.for(object)`` at that place I do not have an object. I only have a key. Would .for help in this situation?
Could it be that it is not a good practice to save parts into a variable and use that variable multiple times?
unrelated: watch out SQL injections
at that place I do not have an object
you always have an object for weak references so trying to see if that's the issue might help:
// try either
this.html.for(document, key)`<your-thing />`;
// or ...
this.html.for(this, key)`<your-thing />`;
Could it be that it is not a good practice to save parts into a variable and use that variable multiple times?
you should never cache anything with uhtml, except that Classy
thing which is fine, as everything is already cached behind the scene and if you break some node order it bails out.
that being said, those are big files, so if you could reproduce a failure without all that bloat around (as I've no idea what I am looking for) it'd surely help me more, thanks!
Could it be that it is not a good practice to save parts into a variable and use that variable multiple times?
on a second thought ... what do you mean? could you simplify at least the logic so I can tell you what's OK and what's maybe not OK or what's a bug?
Thanks it works. I will investigate .for().
Yeah.. thanks for pointing out the query injection problem. It goes to a public API that is read only.. nevertheless now at moments I get a 500 HTTP back so.. probably should be fixed :)
Thansk for the help!
Is this okay? I would think it is not very good.
const example = html`<button onclick=${() => this.remove()}>Remove</button>`
const context = html`<div>${
if (a ? html`<div>${example}</div>` : html`<span>${example}</span>`
}</div>`
If I change to:
const example = () => html`<button onclick=${() => this.remove()}>Remove</button>`
const context = html`<div>${
if (a ? html`<div>${example()}</div>` : html`<span>${example()}</span>`
}</div>`
I would think it would be better.
In any case, if by "save parts into a variable and use that variable multiple times" you mean store a node into a variable, you can't reuse that variable in more than a place for the simple reason that a node is a node, and the tree-differ can't do anything if you arbitrary moves nodes that the tree-differ is handling already.
Is this okay?
no, it's not, you're moving a node manually around and you shouldn't.
On top of that, this.remove()
won't remove the element but its outer most container, if it's a DOM node, or it throws ... that's an arrow function, the context in your example is unknown.
If I change to ...
to be honest, I'd write this one:
const remove = () => this.remove();
const context = html`<div>${a ?
html`<div><button onclick=${remove}>Remove</button></div>` :
html`<span><button onclick=${remove}>Remove</button</span>`
}</div>`;
In few words, don't over-cache anything, as the result will be likely slower instead, and you're not supposed to manually move parts around, that's responsibility of udom to drop, add, or move, nodes ... you never need to take care but if you need same node as reference, you need to use .for(...)
Thanks, yes remove() was an example.. I could be replaced with myAction()