I keep tripping myself up with this one, IE is unable to set the name attribute for any dynamically created DOM nodes. It doesn’t matter if you clone an existing node, or create a new one, IE won’t set the name attribute.
Have a look at this example:
var newCheckbox = document.createElement('input');
newCheckbox.setAttribute('type', 'checkbox');
newCheckbox.setAttribute('name', x[i].name);
newCheckbox.setAttribute('value', '0');
newCheckbox.setAttribute('checked', 'checked');
x[i].parentNode.appendChild(newCheckbox);
Will result in a new input element with no name attribute. The only way I’ve found to counter this, that works in both IE & Firefox is to use innerHTML.
var newCheckbox = document.createElement("span");
newCheckbox.innerHTML ="[input name='" + x[i].name + "' type='checkbox' value='0' checked='checked']";
x[i].parentNode.appendChild(newCheckbox);
Is there a better way? I’d be interested to hear about any other solutions that might work.
-S
I’m currently writing a webapp that is required to work on Ie as well as Firefox, nothing too amazing in that. I’m willing to bet that many developers follow the same workflow as me … develop using Firefox, then make sure it works in IE. Using tools such as theYahoo UI toolkit, Dojo or one of the many other toolkits that helps with cross browser compatability, this task is a lot less fraught than it used to be. Occaisionaly the, you get a good one …
object doesn't support this property or method
I’ve spent the best part of this morning tracking down this bug, which only occurs in IE. My origional code was this:
container = document.getElementById('container');
Which I immediatly changed to
container = YAHOO.util.Dom.get('container');
but that didn’t help much either, YAHOO.util.Dom.get uses document.getElementByI() anyway, so it just moved the problem further up the call stack.
Anyway, to cut a long story short, and to stop you spending as much time reading this post as I did finding the problem, it turns out that IE cannot handle global variables with the same name as an DOM element ID, especially if that variable is actually pointing at that DOM node!!
As Dav Glass explained in reply to my post on the YDN Javascript list, what’s actually happening is that when parseing the page, IE automagically creates a global variable for anything it find with an ID or NAME tag.
In my code, making the variable a private member was actually the right thing to do, but if you absolutly positivly have to make that var global, just make sure it doesn’t share it’s name with the element your trying to get at.
Today I have been playing loading new content into divs using the Yahoo UI “Connection” widget. I wanted to create an effect where the div would fade out the old content, then fade in the new. The best example I could find was this one, but it relies on window.timeout(), which doesn’t work with the example on the Yahoo Dev site, so here’s a little example that does.
Enjoy …
Stubblog 