Question

I have been having this problem in IE. I have two divs which I use to drag selected elements from one to another. Lets say I have a child element (also a div) in div1 and some child elements in div2. I call the div2.appendChild() method on child element of div1. It removes the child from div1 and appends it to div2. If I then try to append the child back to div1 I get the following exception “Unexpected call to method or property access” in IE. It is working perfectly in firefox. See below code snippet for the javascript.

function moveSelectedGroupBoxItems(toLocation, grp){
    document.body.className = 'groupBoxDefaultCursor';
    if(groupBoxfromLocation != toLocation){
        if(grp == groupBoxGroup){
            var fromVal = document.getElementById(groupBoxfromLocation);
            var toVal = document.getElementById(toLocation);

            var children = fromVal.childNodes;
            for (var i = children.length - 1; i >= 0; i--) {
                if(children[i].className == 'groupBoxItemSelected'){
                    children[i].childNodes[0].name=toLocation;
                    toVal.appendChild(children[i]);
                }
            }
        }
    }
    groupBoxfromLocation = '';
    groupBoxGroup = '';
    return false;
}

This basically moves the selected child divs from one parent div to another on dragging.

Answer 1

SOLVED!… sort of
I had hidden inputs within the child divs which stored the id of the item being moved for form submission. I removed the hidden inputs and placed them underneath my selectionboxes. Each time an div is moved it updates the name of the hidden to the parent divs id. It seems IE has a problem with appendChild() when the node has children. This did sometimes work and sometimes it failed. Appending a single element with no children always works. I am not sure exactly what the problem was, but the above sorted it out.

Cheers

Grep