Javascript: The Suckage

[gothwalk]

Originally published at Now Is A Long Time Too. You can comment here or there.

Javascript in Internet Explorer makes me an angry, angry webmaster.
Two days ago, one of the developers passed me some AJAX stuff. “It’s all working,” he said, “it just doesn’t look that great.” It’s a search box, which, after the third character or so, goes off and gets the various possibilities, presents them in a neat two-column div that looks like a dropdown (think Google Suggest). The major problem was that the “columns” weren’t lining up nicely, and it took me about ten minutes to sort that out. And then I noticed that in Internet Explorer, for some odd reason, the first line of the div was blank.
I’ve spent most of two working days since then trying to work out why. I am now past the stage where I growl and threaten the folk who wrote the javascript engine for IE with grievious bodily harm. I’m also past the stage of muttering obscenities under my breath, which made one rather new co-worker, not yet used to me, back away hurriedly. I am approaching the zen stage where I try wholly unrelated things in the code, removing spaces, experimenting with the position of semi-colons and closing brackets, and so on.
So far, I have determined that the innerHTML thingmajgit does not play nice with the appendChild function - but only when you’re not looking closely. If you insert alerts to look more closely, it’s all sweetness and light, although it gets a bit un-cooperative when you try to do stuff with the div it has so politely produced. The moment the alerts are gone, it’s back to pushing poor innerHTML into dark corners and sitting on it.
As best I can describe it in more technical terms, here’s what’s happening:
resultArea is a div, initially styled not to appear. arrCurrentResultSet is an array of schtuff coming back from a database query.

resultArea.appendChild(document.createElement(”ol”)) ;

…creates an ordered list.

var theList = resultArea.childNodes[0] ;
theList.name= “liveSearchList” ;
theList.className = “liveSearchList” ;

… assigns it a nice handy variable, a name, and even a class.

for (var i=0; i<this.arrCurrentResultSet.length; i++) {

var tempItem = document.createElement(”li”) ;

tempItem.innerHTML = “<div class=’itemline’><div class=’eventItem’>” + this.arrCurrentResultSet[i].eventname + “</div><div class=’runnerItem’>” + this.arrCurrentResultSet[i].runner + “</div></div>” ;

tempItem.className = “liveSearchListUnHighlight” ;

theList.appendChild(tempItem) ;

}

resultArea.style.visibility = “visible” ;

… does the work of creating an li, populating it, appending it to the list, and finally making the div visible. Except, in IE only, there’s no text visible in the first li.
If, after the theList.appendChild(tempItem) line, I do an alert for tempItem.InnerHTML, it appears in the alert, AND in the displayed div - except that the second (runnerItem) div is missing in all the li elements. And once there’s some more or less unrelated JS run to highlight different li elements after you press the arrow keys, it goes back to the way it normally is - both divs showing, except in the first one, which is now blank again.
If anyone can explain any of this, offer a workaround, or send money, please do so. The money will buy me beer, which will make me feel better, even if it does nothing to the code.
EDIT: Wordpress’ spectacular inability to deal with <pre> tags is not helping…

Comments

[kehoea.livejournal.com]

Mostly in the spirit of “changes to wholly unrelated code,” have you tried minimising the direct modifications of innerHTML? I suspect the DOM approach was tested and debugged sort-of-separately from the innerHTML. I would have gone for changing textContent instead, but that totally doesn't work with MSIE. Also, more context for trying experiments before suggesting this sort of wild-assed-guess would be helpful; for example, the below works when the div doesn't appear and disappear, but I can't get them to disappear and re-appear in IE in my cut-down test case.

for (var i=0; i < this.arrCurrentResultSet.length; i++) {
    var tempItem = document.createElement("li") ;
    tempItem.className = "liveSearchListUnHighlight" ;

    var itemLineDiv = document.createElement("div");
    itemLineDiv.className = "itemline"; 

    var eventItemDiv = document.createElement("div");
    eventItemDiv.className = "eventItem";
    eventItemDiv.innerHTML = this.arrCurrentResultSet[i].eventname; 

    var runnerItemDiv = document.createElement("div");
    runnerItemDiv.className = "runnerItem";
    runnerItemDiv.innerHTML = this.arrCurrentResultSet[i].runner;

    itemLineDiv.appendChild(eventItemDiv);
    itemLineDiv.appendChild(runnerItemDiv);	
    tempItem.appendChild(itemLineDiv);
    theList.appendChild(tempItem) ;
}