Invalid Argument In Ie

[ShadowMage]

I have a piece of code which adds option elements to various select elements on a page. Here is the snippet:

for (var opt in arrOptions['rafter']) {    newOpt = document.createElement("option");    newOpt.value = opt;    newOpt.text = opt;    newOpt.title = arrOptions['rafter'][opt];    try { //FireFox, Chrome, Safari, Opera        rafterAssmList.add(newOpt, null);        purlinAssmList.add(newOpt.cloneNode(true), null);    } catch(e) { //Internet Explorer        console.log(newOpt);        rafterAssmList.add(newOpt); //error on this line        purlinAssmList.add(newOpt.cloneNode(true));    }}

In IE 8, I get an "Invalid argument" error on the line noted above. The log shows that newOpt is indeed a HTMLOptionElement. The odd thing is, other selects work just fine. Here's an example of a snippet that runs without problem:

for (var opt in arrOptions['frame']) {    newOpt = document.createElement("option");    newOpt.value = opt;    newOpt.text = opt;    newOpt.title = arrOptions['frame'][opt];    try { //FireFox, Chrome, Safari, Opera        frameAssmList.add(newOpt, null);    } catch(e) { //Internet Explorer        frameAssmList.add(newOpt);    }}

The only difference is that I'm adding a clone of the option to a second select element. Any ideas what's going on here?

[justsomeguy]

Try removing the try..catch block and always pass null as the second parameter. IE shouldn't have an issue with that. *SHOULDN'T*

[ShadowMage]

Try removing the try..catch block and always pass null as the second parameter. IE shouldn't have an issue with that. *SHOULDN'T*

Love your emphasis on shouldn't have a problem... Unfortunately, it still has a problem. Which I sort of expected, since the error in my first snippet was being generated in the catch block which meant that IE had already encountered an error.What I didn't expect, was that the error is now on the second add line: purlinAssmList.add(newOpt.cloneNode(true), null); I'm not sure what the problem is here because the Try it example for cloneNode seems to work just fine, so I don't think that's the problem.Any ideas? PS: Same error message, too, BTW: Invalid Argument

[justsomeguy]

The reason I suggested removing that is because it's not clear what exactly is going to happen when this runs:

try { //FireFox, Chrome, Safari, Opera  rafterAssmList.add(newOpt, null);  purlinAssmList.add(newOpt.cloneNode(true), null);} catch(e) { //Internet Explorer  console.log(newOpt);  rafterAssmList.add(newOpt); //error on this line  purlinAssmList.add(newOpt.cloneNode(true));}

It may be that the first line runs fine, where it adds the option to rafterAssmList, but the second line fails which makes it go into the catch block, where it's going to add the same option to the same element again. That might be the cause of the error, trying to add an element that is already in the DOM (even though you're trying to add it to the same element that it already belongs to). It's more straightforward with only one line in the try block, but when there are multiple lines you can't really tell which one had the error that made it go into the catch block. Maybe the cloneNode failed for whatever reason, but it's still attached to the one list. Maybe try to clone the element first, before you add it to anything, then have the try..catch only add the two elements to their parents instead of trying to clone the node that was just added.

[ShadowMage]

It may be that the first line runs fine, where it adds the option to rafterAssmList, but the second line fails which makes it go into the catch block, where it's going to add the same option to the same element again. That might be the cause of the error, trying to add an element that is already in the DOM (even though you're trying to add it to the same element that it already belongs to). It's more straightforward with only one line in the try block, but when there are multiple lines you can't really tell which one had the error that made it go into the catch block. Maybe the cloneNode failed for whatever reason, but it's still attached to the one list.

Makes sense.

Maybe try to clone the element first, before you add it to anything, then have the try..catch only add the two elements to their parents instead of trying to clone the node that was just added.

That gets rid of the error, but it adds a blank element to the select. Here's what I have now:

for (var opt in arrOptions['rafter']) {    newOpt = document.createElement("option");    newOpt.value = opt;    newOpt.text = opt;    newOpt.title = arrOptions['rafter'][opt];    optClone = newOpt.cloneNode(true);    try { //FireFox, Chrome, Safari, Opera        rafterAssmList.add(newOpt, null);        purlinAssmList.add(optClone, null);    } catch(e) { //Internet Explorer        rafterAssmList.add(newOpt);        purlinAssmList.add(optClone);    }}

I tried alerting the clone's text before adding it to the second list, but all I get is an empty alert. Which means that the text is actually empty, so why didn't cloneNode copy the text?

[justsomeguy]

It shows up correctly on the first list but not the second?

[ShadowMage]

Yep. rafterAssmList gets the option added correctly, but purlinAssmList gets a blank option.

[justsomeguy]

I'm not sure why it would be empty, that sounds like a problem with IE. It should also clone all attributes, values, and text. You may need to set the other properties on the node manually, which would sort of defeat the purpose of cloning it.

[ShadowMage]

Well, it must be a bug in IE. I checked the value and title of the cloned option element and both of those properties were copied. But for whatever reason, IE doesn't want to copy the text property. So, I guess I'll just have to set it (again) after cloning the option. Oh, how I love developing for IE... Thanks for your help, JSG.