Jump to content

Invalid Argument In Ie


ShadowMage
 Share

Recommended Posts

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?

  • Like 1
Link to comment
Share on other sites

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... :P 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 Edited by ShadowMage
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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... :closedeyes: Thanks for your help, JSG.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...