DOM-Manipulation JavaScript - Praxistutorial 2 - Das Ergebnis auswerten
1. Die Abschnitte
- Einführung
- Die Initialisierung
- Anfrage vorbereiten
- Daten zusammenstellen
- Anfrage senden
- Der PHP-Code
- Das Ergebnis auswerten
- Die select-Felder manipulieren
- Die Ergebnisse ausgeben
- Die Links generieren
- Noch eine Anfrage
- Inhalte einfügen
- Ein paar Anmerkungen
2. Die Methode analysePostXml
Wird wie gehabt innerhalb der ajaxTut
-Konstruktorfunktion angelegt.
function ajaxTut(fields)
{
...
function analysePostXml ()
{
...
}
}
3. Die select
-Felder durchlaufen
Da wir deren Namen ja schon im Array input
haben, bauen wir uns eine stinknormale Schleife. Und ganz wichtig.
Setzt die Zählervariable mit var
auf privat, da wir in dieser Schleife später eine weitere aufrufen. So vermeiden wir,
dass die sich in die Quere kommen. Und für die Auswertung der XML-Daten legen wir noch ein Array an.
function analysePostXml ()
{
for (var i = 0; i < input.length; i++)
{
var post_data = new Array();
}
}
4. Die XML-Daten verarbeiten
for (var i = 0; i < input.length; i++)
{
...
var select_elements = xml.getElementsByTagName([input[i]])[0];
var select_array = select_elements.firstChild.nodeValue;
post_data = select_array.split(',');
}
Erläuterung
Zuerst holen wir uns mal die Referenzen auf die einzelnen XML-Tags mittels var select_elements =
xml.getElementsByTagName([input[i]])[0];
. Und das funktioniert hier nur, weil die genauso heißen, wie die dazu gehörigen
Namen der select
-Felder. Kleiner Hinweis, gewöhnt euch das auch an, so was spart man sich Arbeit. Noch ein Hinweis
zum Index ([0]
). getElementsByTagName
speichert die Treffer in einem Array ab. Da wir aber pro
select
-Feld nur ein passendes XML-Tag haben, können wir das so direkt ansteuern.
Danach speichern wir uns den Textknoten des XML-Tags in einer Variablen ab (var select_array =
select_elements.firstChild.nodeValue;)
, machen daraus ein Array und speichern das in post_data
mittels
post_data = select_array.split(',');
ab. Eh ich es vergesse, die <agentur ...>
-Elemente benötigen wir
erst mal nicht. Dazu komme ich später.
5. Die select
-Felder leeren
Normalerweise müsste man sich jetzt alle option
-Elemente einzeln heraussuchen und dann entfernen. Gottlob gibt
es in diesem Fall (aber auch in diesem) eine sehr einfache Lösung. Sie werden nämlich von JavaScript intern als Array behandelt
und so reicht es völlig aus, nur das erste Element zu erhalten, da wir das ja immer haben wollen. Dafür setzen wir einfach die
Länge des "option"-Arrays auf 1.
for (var i = 0; i < input.length; i++)
{
...
form[input[i]].length = 1;
}
Danach sollten wir nun die select
-Felder wieder aktiv schalten. Und das geht am sichersten, indem wir das entsprechende
Attribut komplett entfernen. Bitte fangt erst gar nicht an mit setAttribute
und true
oder false
zu arbeiten. Da spielt immer mindestens ein Browser nicht mit.
for (var i = 0; i < input.length; i++)
{
...
form[input[i]].removeAttribute ('disabled');
}
6. Die select
-Felder wieder füllen
Da benutzen wir eine eigene Methode, zu der ich im nächsten Abschnitt komme. Schauen wir uns aber mal den Aufruf und die zu
übergebenden Parameter genauer an. In der post_data
haben wir die Einträge aus den entsprechenden XML-Tags für jedes
select
-Feld als Array abgespeichert. Und input[i]
ist der Name des anzusteuernden select
-Feldes.
for (var i = 0; i < input.length; i++)
{
...
manipulateSelects (post_data, input[i]);
}
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt