Ajax: importNode von XHTML-Dokument zu XHTML-Dokument von Axel Richter, 25.02.2007 18:17

Problem beim Einhängen eines neuen Kindknotens

Tina 25.02.2007 15:50

javascript

Hallo,

Mein Problem gestaltet sich folgendermaßen:
Ich habe ein Formular, in welchem sich eine Auswahlliste befindet.
Je nachdem, was da ausgewählt wird, soll mit Hilfe von AJAX eine zweite Auswahlliste eingefügt werden.

Diese Auswahlliste liegt in einem XML Dokument, welches mit php erzeugt wird, was so aussieht:

  
<?xml version="1.0" encoding="utf-8"?>  
  
<select name="list_name" size="1">  
  <option value="value1">Text1</option>  
  <option value="value2">Text2</option>  
  <option value="value3">Text3</option>  
  <option value="value4">Text4</option>  
</select>

Der relevante JavaScript Text sieht so aus:

  
var xmldoc = http_request.responseXML;  
var select_node = xmldoc.getElementsByTagName('select').item(0);  
  
document.getElementById('insert_tag').replaceChild(select_node, document.getElementById('insert_tag').firstChild);

Zum Verständnis:
http_request.responseXML ist das was mir bei meinem Request zurück geliefert wird.
doucment.getElementById('insert_tag') ist ein div, in dem sich später die Auswahlliste befinden soll.

Ärgerlicher Weise passiert jetzt etwas, was ich mir nicht erklären kann.
Und zwar erscheint nicht die Auswahlliste, sondern es erscheinen nur die Texte zwischen den option Tags, hier also Text1 Text2 Text3 Text4

Makiere ich aber diesen Text, und lasse mir den markierten Quelltext anzeigen, steht da das, was ich eigentlich erwartet habe, also:

  
<div id="insert_tag">  
  <select name="list_name" size="1">  
    <option value="value1">Text1</option>  
    <option value="value2">Text2</option>  
    <option value="value3">Text3</option>  
    <option value="value4">Text4</option>  
  </select>  
</div>

Da ich mit dem Firefox arbeite, schau ich mir das ganze auch mal mit dem WebDeveloper und dem DOM Inspector an.

Wenn ich beim WebDeveloper unter Miscellaneous -> Edit HTML auswähle, erscheint plötzlich die Auswahlliste.

Beim DOM Inspector sehe ich die erzeugte Auswahlliste im Elementbaum, jedoch ist sie im Gegensatz zu der 1. Auswahlliste nicht in Großbuchstaben dargestellt, sondern mit Kleinbuchstaben.

Da das ganze mit AJAX, XML, Elementknoten etc. relatives Neuland für mich ist (so learning-by-doing halt), kann ich keinen Grund finden, warum die erzeugte Auswahlliste nicht angezeigt wird.

Ich wäre sehr dankbar, wenn mir hier jemand helfen könnte. :)

Viele Grüße,
Tina

Beitrag melden

– Informationen zu den Bewertungsregeln

Problem beim Einhängen eines neuen Kindknotens

Axel Richter 25.02.2007 16:36

javascript

– Informationen zu den Bewertungsregeln

Hallo,

Mein Problem gestaltet sich folgendermaßen:
Ich habe ein Formular, in welchem sich eine Auswahlliste befindet.
Je nachdem, was da ausgewählt wird, soll mit Hilfe von AJAX eine zweite Auswahlliste eingefügt werden.

Diese Auswahlliste liegt in einem XML Dokument, welches mit php erzeugt wird, was so aussieht:

<?xml version="1.0" encoding="utf-8"?>

<select name="list_name" size="1">
  <option value="value1">Text1</option>
  <option value="value2">Text2</option>
  <option value="value3">Text3</option>
  <option value="value4">Text4</option>
</select>


>   
> Der relevante JavaScript Text sieht so aus:  
>   
> ~~~javascript
  

> var xmldoc = http_request.responseXML;  
> var select_node = xmldoc.getElementsByTagName('select').item(0);  
>   
> document.getElementById('insert_tag').replaceChild(select_node, document.getElementById('insert_tag').firstChild);  
>

Ähm, nein, Du kannst nicht einfach ein XMLNode als HTMLElement in ein HTMLDocument einhängen.

Die "einfache" Lösung wäre, mit dem responseText zu arbeiten und diesen als innerHTML des DIVs zu schreiben:

  
document.getElementById("insert_tag").innerHTML = http_request.responseText;

Wobei diese _sehr_ einfache Holzhammermethode auch die XML-Deklaration <?xml version="1.0" encoding="utf-8"?> mit ins innerHTML schreibt. Das stört zwar nicht, ist aber auch nicht schön. Es ließe sich ja aber mit einigen String-Manipulationen am http_request.responseText auch noch vermeiden.

Willst Du wirklich mit DOM arbeiten, musst Du aus den XMLNodes erst mal HTMLElemente machen.

etwa:

  
var myXMLSelect = http_request.responseXML.getElementsByTagName("select").item(0);  
var myHTMLSelect = document.createElement("select");  
myHTMLSelect.name = myXMLSelect.getAttribute("name");  
myHTMLSelect.size = myXMLSelect.getAttribute("size");  
var myXMLOptions = myXMLSelect.getElementsByTagName("option");  
var myHTMLOption = null;  
for (var i = 0; i < myXMLOptions.length; i++) {  
  myHTMLOption = new Option(myXMLOptions[i].firstChild.nodeValue, myXMLOptions[i].getAttribute("value"), false, false);  
  myHTMLSelect.options[myHTMLSelect.options.length] = myHTMLOption;  
}  
  
document.getElementById("insert_tag").replaceChild(myHTMLSelect, document.getElementById("insert_tag").firstChild);

viele Grüße

Axel

Beitrag melden

– Informationen zu den Bewertungsregeln

Problem beim Einhängen eines neuen Kindknotens
Tina 25.02.2007 17:34

javascript
– Informationen zu den Bewertungsregeln
Hallo Alex,

Dass man das nicht so direkt einhängen kann, war mir nicht bewusst, aber eigentlich logisch.
Merk ich mir für die Zukuft.^^

Vielen Dank für deine Hilfe.

Grüße,
Tina
Beitrag melden

–
Informationen zu den Bewertungsregeln

Ajax: importNode von XHTML-Dokument zu XHTML-Dokument

Axel Richter 25.02.2007 18:17

javascript

– Informationen zu den Bewertungsregeln

Hallo,

im dem Zusammenhang habe ich mal probiert, ob das Einhängen(Importieren) von Nodes per Ajax von einem application/xhtml+xml Dokument in ein Document mit dem selben Content-Type funktioniert. Bisher ist mir auch das nicht geglückt. Das Folgende kann natürlich nicht mit dem IE ausgetestet werden:

  
<?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>Beschreibung der Seite</title>  
<script type="text/javascript">  
/* <![CDATA[ */  
function newXMLHttpRequest() {  
 var xmlreq = false;  
 if (window.XMLHttpRequest) {  
  xmlreq = new XMLHttpRequest();  
 }  
 return xmlreq;  
}  
  
function BehandlungBeiFertigStatusAenderung() {  
 alert(httpRequest.readyState);  
 if (httpRequest.readyState == 4) {  
  alert(httpRequest.status);  
  if (httpRequest.status == 200) {  
   alert(httpRequest.getAllResponseHeaders());  
   alert(httpRequest.responseText);  
  
   var myXMLSelect = httpRequest.responseXML.getElementsByTagName("select").item(0);  
   document.getElementById("insert_tag").replaceChild(document.importNode(myXMLSelect, true), document.getElementById("insert_tag").firstChild);  
  
  } else {  
     alert("ERROR: "+ httpRequest.status);  
    }  
 }  
}  
  
function doAjaxRequestAsynchron() {  
 httpRequest = newXMLHttpRequest();  
 try {  
  httpRequest.open("GET", "test.xhtml", true);  
  httpRequest.onreadystatechange = BehandlungBeiFertigStatusAenderung;  
  httpRequest.send(null);  
 } catch (ex) {  
   if (ex.description) alert(ex.description); else alert(ex);  
 }  
}  
/* ]]> */  
</script>  
</head>  
<body>  
<p><button onclick="doAjaxRequestAsynchron();">doAjaxRequestAsynchron()</button></p>  
<div id="insert_tag">&nbsp;</div>  
</body>  
</html>

wird als application/xhtml+xml ausgeliefert. Die test.xhtml enthält:

  
<?xml version="1.0" encoding="utf-8"?>  
  
<select name="list_name" size="1">  
  <option value="value1">Text1</option>  
  <option value="value2">Text2</option>  
  <option value="value3">Text3</option>  
  <option value="value4">Text4</option>  
</select>

und wird auch als application/xhtml+xml ausgeliefert. Trotzdem funktioniert das

document.getElementById("insert_tag").replaceChild(document.importNode(myXMLSelect, true), document.getElementById("insert_tag").firstChild);

nicht wie erwartet. Die Elemente werden zwar eingehängt, aber nicht als Elemente geparsed.

Habe ich was falsch gemacht? Oder ist responseXML eben immer XML, egal, welchen Content-Type der Server liefert?

viele Grüße

Axel

Beitrag melden

– Informationen zu den Bewertungsregeln

Ajax: importNode von XHTML-Dokument zu XHTML-Dokument
Axel Richter 25.02.2007 18:42

javascript
– Informationen zu den Bewertungsregeln
Hallo,

Kommando zurück! Wenn die test.xhtml
```
  
<?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>Beschreibung der Seite</title>  
</head>  
<body>  
<select name="list_name" size="1">  
  <option value="value1">Text1</option>  
  <option value="value2">Text2</option>  
  <option value="value3">Text3</option>  
  <option value="value4">Text4</option>  
</select>  
</body>  
</html>  
```
enthält und auch als application/xhtml+xml ausgeliefert wird, funktioniert das

document.getElementById("insert_tag").replaceChild(document.importNode(myXMLSelect, true), document.getElementById("insert_tag").firstChild);

doch wie erwartet. ;-)

viele Grüße

Axel
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Tina: Problem beim Einhängen eines neuen Kindknotens

Problem beim Einhängen eines neuen Kindknotens

Ajax: importNode von XHTML-Dokument zu XHTML-Dokument

Problem beim Einhängen eines neuen Kindknotens

Problem beim Einhängen eines neuen Kindknotens

Problem beim Einhängen eines neuen Kindknotens

Ajax: importNode von XHTML-Dokument zu XHTML-Dokument

Ajax: importNode von XHTML-Dokument zu XHTML-Dokument