Search code examples
javascriptinternet-explorerdojo

Dojo: placing the same dom-node a second time doesn't work on IE11

this is a question which I'm asking just for scientific interest. I didn't find issues related to my problem but I already made a workaround.

The problem: I have a node in my widget where I want to place, related to the logical context of the widget, one of three other dom-nodes that already got constructed. I use domconstruct.place() for this task with the option "only" to replace easily all childs which are possibly already placed in this node.

It works for Chrome, Firefox and Edge. In Internet Explorer 11 (and also older versions) each of the already constructed dom-nodes will be placed only for the first time. If a dom-node should get placed a second time the target node will be empty (old childs will be removed, no new child will be added or at least only a child with no content).

Here is a simplified JSFiddle example to illustrate the problem.

This fiddle already contains one workaround: just recreate the node when placing. So the first button will work with ie every time placing "test1". Button two and three will work for the first time, but from the second time nothing will be placed. If this happens the first button still will work.

In my real code the provided workaround is unfortunately not possible. My current solution involves sniffing for ie and placing all nodes together on the same place working with the visibility attribute.

As stated in the beginning I have a scientific interested in this question. Does anybody know this behavior? Is it a dojo/ie bug? Am I doing something wrong?

Solution

  • It's not a dojo or IE bug, it's just a difference in how browsers remove nodes. When you use only attribute for place() function, content of your container node is cleared with node.removeChild(). While you have a link to your node it still live in memory and is only removed from tree. Different browsers do this in different way. In your case chrome and firefox keep your node and it's content in memory, and IE keep only node, but innerHTML is cleared.

    Here is same question, but regarding IE 7

    In my opinion you have several options:

    1. Create new node every time as you did it in you example for div1

    2. Place all nodes in container at the same time and toggle visibility of them.

    3. Create templated widget for your node and instantiate it every time.

    1 and 2 you have already tried. Maybe there are some other choises, but I don't see them at the moment.