Die Aufgabe besteht — wie schon geschrieben — darin, ein Seitenfragment dynamisch per Ajax nachzuladen und in den bestehenden Content einzufügen. Dank Yahoo’s User Interface ( YUI ) klappte der Ajax-Aufruf zum Laden des Inhalts auch recht flott. Als Antwort kommt aber einen Text-String (responseText) zurück, statt einem erhofften DOM-Node-Objekt.

Ansich lässt sich dieser reine Text einschließlich HTML-Formatierungen einfach in ein bestehendes HTML-Element einbinden, etwa in ein DIV-Element mit der id=”content”:

document.getElementById('content').innerHTML=responseText;

Diese einfache Zeile überschreibt den Inhalt des DIV-Elements durch den erhaltenen String. Wie gesagt werden Format-Anweisungen wie <strong>, <div> und weitere korrekt angezeigt.

Anders aber sieht es mit Javascript aus. Die Javascript-Engine des Browsers reagiert offensichtlich nur auf ein Node-Objekt vom Typ <script>. Es hilft alles nichts, ohne ein vermeintlich aufwändiges Parsen des HTML-Strings gibt es kein Javascript. Die Lösung aber ist doch trivialer, als von mir gedacht.

Die Antwort lautet DocumentFragment. Dieser Typ wird im W3C DOM Standard beschrieben und wird von Firefox wie auch vom Internet Explorer unterstützt. Nachfolgend ist ein Code-Beispiel aufgeführt, welches die Zeichenkette mit dem HTML-Code in der Variable “text” enthält. Weiterhin gilt, dass mein DIV-Element mit der id “content” als Container für den nachgeladenen Code herhalten soll.

var divElement = document.createElement('div');
divElement.innerHTML = text;
var docFrag = document.createDocumentFragment();
while (divElement.firstChild)
docFrag.appendChild(divElement.firstChild);
document.getElementById("document").appendChild(docFrag);

Dieses einfache Beispiel genügt, um sein nachgeladenes Javascript lauffähig zu machen.

Noch ein Tipp: Dieses Beispiel fügt das Code-Fragment als letztes Kind von “content” ein. Alles was bereits im DIV-Element enthalten ist bleibt auch nachher sichtbar. Will man einen leeren Container verwenden, so lässt sich dieser wie folgt entrümpeln:

while ( document.getElementById("content").firstChild )
document.getElementById("content")
.removeChild(contentNode.firstChild);

Wie erwähnt, wurde das betroffene Html-Template von einer anderen Seite nachgeladen. Das Nachladen machte der Ajax.Updater aus dem prototype-Framework. Standard-mäßig löscht diese Methode die Script-Anweisungen aus dem geladenen Code heraus — was mein Problem erklärt. Die Option evalScripts:true bringt den “Updater” dazu, den geladenen Script-Code an den Client weiterzureichen.