✔ DHTML Kalender und HTTPRequest

[WiZdooM]

Hi Leute,

ich bastle grad ein einer PHP-Seite, die mittels HTTPRequest Inhalte (der in PHP-Dateien liegt) dynamisch läd ohne die gesamte Seite neu zu laden. Das funktioniert soweit super, bis auf das folgende:

Einer der dynamisch zu ladenenden Inhalte ist eine Maske, die einen Freeware-DHTML-Kalender beinhaltet. Der Kalender ist funktional einfach gehalten und kommt mit einer css-Datei und einer js-Datei.

In einer leeren php- oder html-Seite binde ich den Kalender über das <script>-Tag im Header ein und definiere im Body lediglich ein <div id="calendar"> und der Kalender wird dort angezeigt. Mit dem mitgelieferten CSS auch noch optisch ansprechender.

Übergebe ich die leere Seite meiner HTTPRequest-Funktion wird zwar die Seite geladen, aber der Kalender nicht. In der Konsole wird kein Fehler ausgeworfen, weil erst gar kein Javascript-Code ausgeführt wird! Die Frage ist an der Stelle: WARUM? Ist das Response-Objekt nur ein "Text-Container"? (Wenn ja, warum wird dann html- oder php-code interpretiert, anstatt als plaintext zurückgegeben?)

Hängt das vielleicht mit dem setRequestHeader zusammen?


Edit:

Nachdem ich nun weitere 6 Stunden rumgebastelt und alle Kombinationen ausprobiert hab, die mir auch nur in den Sinn gekommen sind, habe ich eine Lösung gefunden (eigentlich sogar zwei).

setRequestHeader hat mit dem "Effekt" soweit nichts zu tun. Mit der Funktion setzt man einen benutzerdefinierten Header zum Senden von Daten.

Ich bin bei meinen Basteleien und Recherchen auf folgendes Stück Code gestoßen, dass in eine Seite nachträglich Tags setzen kann:

in der HTML / PHP-Seite:

<a onClick="loadContent('./test.php','content'); loadObjects('./calendar.js','./calendar.css');">Test</a>

im JS-File:

function loadObjects(){
	if (!document.getElementById)
		return;
	
	for (i=0; i<arguments.length; i++){
		var file=arguments[i];
		var fileref="";
		if (loadedObjects.indexOf(file)==-1){ //Prüfen, ob das Objekt bereits hinzugefügt wurde
			if (file.indexOf(".js")!=-1){ //Ist das Objekt ein JS?
				fileref=document.createElement('script');
				fileref.setAttribute("type","text/javascript");
				fileref.setAttribute("src", file);
			}
			else if (file.indexOf(".css")!=-1){ //Ist das Objekt ein CSS?
				fileref=document.createElement("link");
				fileref.setAttribute("rel", "stylesheet");
				fileref.setAttribute("type", "text/css");
				fileref.setAttribute("href", file);
			}
		}
		if (fileref!=""){
			document.getElementsByTagName("head").item(0).appendChild(fileref);
			loadedObjects+=file+" "; //Merken, dass das Objekt der Seite hinzugefügt wurde
		}
	}
}

Quelle: http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Allerdings hat dieses Scriptlet nicht zum gewünschten Ergebnis geführt. Zwar wurde alles eingebunden, aber die enstprechende Methode zum Laden des Kalenders wurde nicht getriggert. Der Grund hierfür ist mir nach wie vor unklar.

Ich hatte dann spaßeshalber den <script>-Tag in den Header der Hauptseite (anstatt diesen dynamisch in die Zielseite einzubinden) eingefügt, nur dass zwar die Initialisierung angelaufen ist, aber wegen Null-Referenz einen Fehler geworfen hat. Offensichtlich versucht das Skript beim Laden der Hauptseite auf das <div id=calendar> zugreifen, das noch nicht existiert. Aus reiner "Verzweiflung" (weil mir echt nichts besseres mehr eingefallen ist) habe ich dann die Funktion setTimeout() statt der loadObjects() verwendet:

in der HTML / PHP-Seite:
<a onClick="loadContent('./test.php','content'); setTimeout('new CalendarJS.init()', 500)">Test</a>

Jetzt lädt der Content und mit Verzögerung wird der Kalender initialisiert und findet auch sein <div>-Element.