Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript IE appendChild() - Unexpected call to method or property access

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.

like image 748
Gerrit Brink Avatar asked Nov 10 '09 15:11

Gerrit Brink


1 Answers

For search results benefits - I had this same error in IE 6 and 7 "Unexpected call to method or property access" when appending a child node to a namespaced element, but the namespace hadn't been declared.

var a=document.createElement("foo:blah");
var b=document.createElement("div");
a.appendChild(b); //Fails

To get around this, I had to add the namespace declaration either into the HTML code:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo>

or dynamically via javascript (Probably should be wrapped in try/catch):

var namespaces = document.namespaces;
if(namespaces) {
    namespaces.add("foo", null, null);
}
like image 193
Andrew Avatar answered Nov 14 '22 23:11

Andrew