Ik blijf maar tegen problemen lopen bij IE en XML.
Het model dat andere browsers hanteren is dermate eenvoudiger en consistenter, dat ik me afvraag hoe ik dit onder IE aan de praat ga krijgen.
Concept
Een JS call haalt een (x)HTML pagina op via xmlHttpRequest. Een callback zoekt naar een table id="calendar" en bewaart deze. vv. maakt deze callback een div aan, append hier de table aan, en append de div aan de document.body.
Probleem 1: getElementsById
Bij IE wil het vinden van de table maar met moeite. Waar Gecko en tzt Safari gewoon met req.responseXML.getElementById() aan de slag kunnen, wil IE dit niet. Dus, splitten we de code al:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| var div = document.createElement('div');
div.id = "calendar-wrapper";
if(calendarreq.responseXML.getElementById)
{
var calendar = calendarreq.responseXML.getElementById('calendar');
calendar.id = '';
div.appendChild(calendar);
}
else
{
var calendar = calendarreq.responseXML.documentElement.childNodes[1].getElementsByTagName('table')[0];
cloneNodeDeep(calendar, div);
}
document.body.appendChild(div); |
Dit is behoorlijke kazig; een fixed documentstructuur verplichten. Tevens doet de cloneNodeDeep een +=innerHTML ipv een echte DOM instructie.
Mogelijk zou het iets fraaier kunnen door alle tables te doorlopen en vv naar de id/className/whatever te kijken.
Probleem 2: .xml != DOM node
Het volgende punt is het ophalen van de huidige dag. Hiervoor hergebruik ik wederom al bestaande acties en templates; de dagweergave is echter gevuld met lege rows die bij een mini-weergave dermate veel vervuiling geven dat ik alleen de echte events eruit wil halen.
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
| function displaySelectedDay()
{
if(typeof calendardayreq != 'undefined' && calendardayreq != null && calendardayreq.readyState == 4 )
{
if(calendardayreq.responseXML.getElementById)
{
var calendar = calendardayreq.responseXML.getElementById('calendar');
calendar.id = '';
}
else
{
var calendar = calendardayreq.responseXML.documentElement.childNodes[1].getElementsByTagName('dl')[1];
calendar = calendar.xml;
}
var div = document.getElementById('calendar-today');
if(!div)
{
div = document.createElement('div');
div.id = 'calendar-today';
document.body.appendChild(div);
}
else if(div.firstChild)
{
div.removeChild(div.firstChild);
}
if(calendar)
{
//post-process the tables .event
var tableCells = cssQuery('td.event',calendar);
if(tableCells.length > 0)
{
var clone = null;
var newTable = document.createElement('table');
var newTbody = document.createElement('tbody');
newTable.appendChild(newTbody);
var tableRow = null;
for(var i=0;i<tableCells.length;i++)
{
clone = tableCells[i].cloneNode(true);
clone.rowSpan = 1;
clone.colSpan = 1;
tableRow = document.createElement('tr');
tableRow.appendChild(clone);
newTbody.appendChild(tableRow);
}
var table = cssQuery('table.react-calendar',calendar)[0];
table.parentNode.appendChild(newTable);
table.parentNode.removeChild(table);
}
div.appendChild(calendar);
}
calendardayreq = null;
}
}; |
(excuus voor de lap code).
Hier vinden talloze problemen plaats; allemaal terug te vinden zover ik weet in het soort object dat req.responseXML.documentElement.childNodes[1].getElementsByTagName('dl')[1].xml terug geeft: een XML object en geen DOM object. Deze kent een totaal andere interface dan de DOM en maakt het kopieeren en manipuleren moeilijk tot onmogelijk.
Ik moet dus op 1 of andere wijze aan de slag kunnen gaan met de .xml die IE teruggeeft; maar behalve een flinke XSLT die het object 1:1 overzet naar een DOM object (en dus dubbele code vereist: templates en een identieke XSLT) kan ik niks bedenken.
Wie heeft er ervaring met het werken met xmlHttpRequest, IE en het gebruikmaken van de DOM? Alle voorbeelden die ik vind werken met responseText en innerHTML - en het zou toch veel fraaier en degelijker moeten kunnen?
Klaar voor een nieuwe uitdaging.
:strip_exif()/u/13214/schanulleke.gif?f=community)
/u/20544/pelle-jjvv-bg.png?f=community)
/u/89535/crop56f4e5c063de4.png?f=community)
/u/7685/ruinmytune-60x60.png?f=community)
:strip_icc():strip_exif()/u/6754/image.jpg?f=community)
:strip_icc():strip_exif()/u/59957/got-icon.jpg?f=community){kind=icon}