Hauptmenü

Untermenü

DOM-Manipulation JavaScript - Praxistutorial 2 - Das Ergebnis auswerten

1. Die Abschnitte

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