Eingehängte Knoten werden nicht richtig dargestellt

[Frederik]

Hallo!

Da ich mich gerade in AJAX einarbeite, möchte ich eine kleine "Suggest"-Funktion schreiben: Wenn man in ein Formularfeld etwas einträgt, wird eine Liste mit Vorschlägen vom Server geholt und angezeigt.

Dazu habe ich ein Server-Skript, das folgendes Zurückgibt:

  
<div>  
<p>Erster Eintrag</p>  
<p>Zweiter Eintrag</p>  
</div>  

Die zugehörige JavaScript-Funktion sieht so aus:

  
function showHint(name, value) {  
    hint = document.getElementById(name+"hint");  
    if(value.length == 0){  
        hint.innerHTML = "";  
        return;  
    }  
    http_request = getXHR();  
    http_request.onreadystatechange = function(){  
        if (http_request.readyState==4){  
            while(hint.hasChildNodes()){  
                hint.removeChild(hint.firstChild);  
            }  
            hint.appendChild(http_request.responseXML.firstChild);  
        }  
    };  
    url = url + "?ajax=1&action=hint&name=" + name + "&value=" + value;  
    http_request.open('GET', url, true);  
    http_request.send(null);  
}  

Damit soll dem Knoten "hint" das div einfach eingehängt werden. Das scheint auch zu klappen, wenn man sich danach den DOM-Tree der Seite anguckt. Nur wird leider das eingehängte div falsch dargestellt:

ErsterEintragZweiterEintrag

Also völlig ohne Formatierung, die Einträge werden nicht mal als Block-Elemente dargestellt. Alle anderen Formatierungsangaben werden ebenfalls ignoriert.

Ich habe es in Firefox und Opera getestet, in beiden Fällen das gleiche. Hat jemand eine Idee, warum die neuen Elemente nicht korrekt dargestellt werden?

Danke und liebe Grüße
Frederik

[molily]

Hallo,

Wenn du über DOM arbeitest, muss der Server ein korrektes XML-Dokument (in dem Fall ein hinreichend vollständiges XHTML-Fragment) liefern, d.h. du brauchst die passende Namespace-Angabe (xmlns="http://www.w3.org/1999/xhtml") im obersten Element. Erst dann wird das Markup als XHTML erkannt.

Dann sollte es nicht so ohne weiteres möglich sein, Knoten aus einem Dokument in ein anderes umzuhängen. Normalerweise arbeitet man da mit cloneNode und importNode. Wundert mich, dass es bei dir ohne klappt.

Mathias

[Sven Rautenberg]

Moin!

Dann sollte es nicht so ohne weiteres möglich sein, Knoten aus einem Dokument in ein anderes umzuhängen. Normalerweise arbeitet man da mit cloneNode und importNode. Wundert mich, dass es bei dir ohne klappt.

Die übliche Vorgehensweise wäre, das AJAX-Ergebnis nur als String zu betrachten und per innerHTML in das bestehende Dokument einzuarbeiten.

Oder man läßt z.B. jQuery die Arbeit machen:

  
function showHint(name, value) {  
$('#'+name+'hint').load(url + "?ajax=1&action=hint&name=" + name + "&value=" + value);  
}  

- Sven Rautenberg

[Frederik]

Danke für eure Antworten!

Der fehlende Namespace erklärt das Verhalten natürlich, da werden dann nur die Textknoten ansonsten unbekannter XML-Elemente angezeigt, und nicht formatiert.

Aber das mit dem innerHTML ist natürlich die einfachste Lösung, dann spart man sich die DOM-Operationen. Ich war irgendwie davon ausgegangen, dass man neue Elementknoten auch über das DOM einhängen muss, das war natürlich ein Fehler.

jQuery sieht sehr interessant aus, das würde ich mir für größere Projekte auf jeden Fall einmal ansehen! Im Augenblick spiele ich nur ein bisschen mit den grundlegenden Funktionsweisen von AJAX, da ist es auch ganz gut, das mal "per Hand" zu machen.

Liebe Grüße
Frederik