DOM Manipulation Woes In Firefox and IE

21 May, 2007. 361 words.

I realize that most programmers like puzzles, but I, for one, am growing very tired of the continual “find the code combination that works” puzzles that occur when trying to write cross-browser compatible Javascript. I mean, this kind of thing has been going on since the mid-1990s. Are we EVER going to get any standards??

I wanted to add what I considered to be a fairly trivial bit of Javascript functionality to a page: When you click an “email” link, display a small form with two textboxes and a “send” button, which will send an AJAX request to send an email when you click the button. I started with this (lines split up for clarity):

span.innerHTML=’
    From:<input class=“email” type=“text”
    name=“txtEmailFrom’+id+’” size=“10″ value=”" />
    To:<input class=“email” type=“text”
    name=“txtEmailTo’+id+’” size=“15″ value=”" />
    <input class=“email” type=“button”
    name=“btnEmail” value=“Send”
    onclick=“emailSend(’+id+’);return false;” />’;

var emailCtl = document.getElementById(’txtEmailFrom’+id);
if( !emailCtl ) return;
emailCtl.focus();

It worked fine in Internet Explorer 6 and 7. Naturally, it didn’t work in Firefox 2. In the past, I wouldn’t have cared about non-IE support, but Firefox is actually a pretty cool browser, especially with all the development tools.

After a lot of Googling and random fiddling with the code, I came up with this far lengthier solution:

span.innerHTML=";
var f = document.createElement(“span”);
f.id=“emailButtons”+id;
f.appendChild(document.createTextNode(" To:"));
var i1 = document.createElement(‘input’);
i1.id = ’txtEmailTo’+id;
i1.className = ’email’;
i1.setAttribute(’type’, ’text’);
i1.setAttribute(‘size’, ‘15’);
f.appendChild(i1);
f.appendChild(document.createTextNode(’ From:’));
var i2 = document.createElement(‘input’);
i2.id = ’txtEmailFrom’+id;
i2.className = ’email’;
i2.setAttribute(’type’, ’text’);
i2.setAttribute(‘size’, ‘10’);
f.appendChild(i2);
f.appendChild(document.createTextNode(’ ‘));
var clicktext = “emailSend("+id+”,
document.getElementById(‘txtEmailFrom"+id+"’).value,
document.getElementById(’txtEmailTo"+id+"’).value);return false;";
var i3;
i3 = document.createElement(‘input’);
i3.setAttribute(‘onclick’, clicktext);
id.id = ‘btnSendEmail’+id;
i3.className=‘email’;
i3.setAttribute(’type’, ‘button’);
i3.setAttribute(‘value’, ‘Send’);
f.appendChild(i3);
span.appendChild(f);
i1.focus();

That made Firefox happy. But naturally, it didn’t work in Internet Explorer anymore. The problem occurred in wiring up the “onclick” event for the new button. Firefox allowed me to set the “onclick” attribute as shown above, but Internet Explorer cheerfully ignored it.

I ended up having to put in a browser check and branch the code like this:

var i3;
if( isIE )
{
    i3 = document.createElement(
        ‘’);
}
else
{
    i3 = document.createElement(‘input’);
    i3.setAttribute(‘onclick’, clicktext);
}

Now it works, but that is some ugly code. Gah!

Related