English 中文(简体)
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.

最佳回答

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

问题回答

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);
}

I had this issue in IE7 and it turned out to be that the IE7 DOM was not perfect.

In my case I had an image tag rendered by the ASP.NET MCV TagBuilder, which rendered it as:

<img ...></img>

Note the ending tag there and that was what caused the problem. It worked when rendered as:

<img ... />

Hope this helps.

I agree with Kaze noe Koe, dynamically setting the name of elements is not the most bullet-proof practice. Unfortunately, I cannot tell you how to get rid of the error. However, I highly recommend using a JavaScript library (jQuery, Prototype, Dojo, ...). They are quite small, relatively easy to learn, and much more convenient to use than the horrible DOM API. Last but not least, they shield you from many such awkward Browser incompatibilities. Give it a try, after a couple of days you cannot imagine going back, I promise.

Are you sure it isn t dying on:

children[i].childNodes[0].name=toLocation;

What are you trying to accomplish with this line?


Seriously, try to comment it out. I don t even think it is what you think it is - isn t the right property called nodeName?

children[i].childNodes[0].name=toLocation;

Each child div contained in the parent div also contains a hidden input value. The parent divs do not contain a name attribute, only an id. When the child divs are dragged from one parent div to another parent it updates the name value of all the hidden inputs to the divs id. When the form is submitted the server can then distinguish which values were present in the specific parent div. This works in IE and Firefox without fail thus far. The problem definately lies within the appendChild() method as it keeps breaking on this statement. If a parent div is empty at load everything works perfectly. If a parent divs children are appended to a different div and then back again I get the exception in IE only.

Unfortunately I cannot implement a framework as of yet. Our tags frequently change to accomodate new requirements.

Thanks for your replies on my topic, hope this makes more sense now.

Cheers

Grep

just had the same problem with IE7, cured it by adding a timeout:

setTimeout(function(){gallery.appendChild(g_field)},300);

I ve lost count of the no of times something doesn t work in IE but works perfectly in Firefox that can be solved by a short delay...no idea why!

Sorry! spoke to soon...turns out my timeout (in this case) didn t work.





相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签