DWR과 IE와 TBODY와 innerHTML과 협공

DWR을 사용해서(자바용 AJAX 라이브러리) 받아온 결과를 여러 개의 TR태그로 만들어서 미리 만들어져 있는 TBODY의 innerHTML에 밀어넣는 코드를 만들었었다. 작업은 주로 리눅스에서 했고 파이어폭스 1.5 / 2.0에서 잘 돌아갔다. QA팀의 테스트에 임박해서야 IE에서 처음으로 테스트 했는데.. 웬걸.. 완전 먹통인 것이다.

처음에는 DWR의 문제라고 생각했다. 일단 DWR이 만들어는 응답 메시지가 구질구질했기 때문이다. DWR을 걷어내야겠다고 맘만 먹고 일단 퇴근... 그러나... 좀 아깝긴 하다 -.-; DWR 같이 거져먹는(써본 사람들은 이 표현에 동의할 것이라고 확신한다) 라이브러리를 포기한다는 건 말처럼 쉬운 일이 아니다.

집에만 설치되어 있는 IE용 자바스크립트 디버거(MicrosoftScriptEditor)로 트레이스를 좀 해보기로 했다. DWR의 응답 메시지만 구질구질한게 아니다. 그 안쪽 로직은... 더욱 멋지다-.-;;;; 추적 불가능에 가깝다. 온 동네에 eval이라는 지뢰가 깔려있다. 대충 ?StepOver를 하다가 지뢰 밟기를 수십 번... 그렇게 범위를 좁혀 나간 다음, 마침내 ?StepInto라는 탐침봉으로 한 줄 한 줄 조심스럽게 찔러나갔다. 그리고... 범인은...

.

.

.

.

.

.

.

.

.

.

미안하다. 내가 그랬다. -.-;;;;

삽질이라는게 대개 그렇지만, 오늘의 삽질은 유난히 결론이 짧다:

IE에서... COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 태그의 innerHTML 속성은 읽기 전용 이다.

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp

(TABLE에만 적용되므로) 별로 쓸모는 없겠지만 임시 해결책은: 출처: http://www.ajaxian.com/archives/innerhtml-gotchas

1. function tableInnerHTML(target, rowHTML) {
2.     /* Removed - why delete them?!
3.     while (target.rows.length > 0) {
4.         target.deleteRow(0);
5.     } */
6.     var tempDiv = document.createElement(”div”);
7.     document.body.appendChild(tempDiv);
8.     tempDiv.innerHTML = ‘’ + rowHTML + ‘’;
9.     var tt = document.getElementById(”tempTable”);
10.     /* Copy temporary table’s rows to target */
11.     for (var i = 0; i < tt.rows.length; i++) {
12.         target.appendChild(tt.rows[i].cloneNode(true));
13.     }
14.     tt.parentNode.removeChild(tt);
15. }

오늘의 교훈: 남들 잘 쓰는 라이브러리를 함부로 의심하지말고... 니나 잘해라-.-;