DOM-Manipulation JavaScript - Praxistutorial 2 - Die Links generieren

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. Der einfache Teil

function manipulateCompanies ()
{
  ...
  for (i = 0; i < company_info.length; i++)
  {
    ...
    else if (1 == info)
    {
      var link = document.createElement ('a');          
      link.appendChild(text);
      link.setAttribute('href','#'); 
      // Hier kommt noch Code!
      absatz.appendChild (link);       
    }
    // Sollte schon vorhanden und erklärt sein
    document.getElementById('result').appendChild(absatz);  
  }
}

... sieht nicht nur so aus, sondern ist es auch. Linkelement erzeugen, Text einhängen (das haben wir ja vorher schon gemacht) und Attributknoten href mitsamt Wert einhängen. Das document.getElementById('result').appendChild(absatz); habe ich ja schon im vorherigen Abschnitt erklärt.

3. ABER!!!

... sobald wir den Event-Handler einbauen wollen, spielt der Internet Explorer 6/7 mal wieder nicht mit. Wer nun denkt, dass ein einfaches

link.setAttribute('onclick','ref.prepareRequest("get",' + id + ');');

anstelle des // Hier kommt noch Code! ausreicht, der irrt sich. Selbst bei einem createAttribute und Allem, was dazu gehört, passiert gar nichts!

Das Problem

Wie ich schon eingangs beim Einstiegstutorial sagte, ist der Internet Explorer, oder genauer gesagt dessen Programmierer, offenbar der Meinung, dass Event-Handler nicht zum DOM gehören und somit auch nicht entsprechend eingehängt werden können. Stattdessen muss man das onclick leider so setzen.

else if (1 == info)
{ 
  ...
  link.onclick = function ()
  { 
    ref.prepareRequest('get', id);
  }
}

Und noch ein dickes aber!

Das mit der Übergabe der id funktioniert auch nicht korrekt. Wieso? Baut mal in obigen Handler ein alert(id) ein und ihr werdet merken, dass immer die letzte(!) ausgegeben wird. Ein ähnliches Problem hatten wir schon mal hier. Stellt euch das so vor. Ihr baut in einer Schleife ein onclick. Aber die id wird erst übergeben, wenn man auf den Link klickt. Denn das ist nun mal der letzte Wert, weil die anderen zu diesem Zeitpunkt nicht mehr vorhanden sind.

Der Umweg

Im so einem Fall muss man ein wenig tricksen. Ich zeige euch hier nur mal eine Möglichkeit. Dabei hänge ich den zusätzlichen Attributknoten name in den Link ein und gebe ihm den Wert der jeweiligen id. Den kann ich dann ganz bequem über this.name an die Methode prepareRequest übergeben. Und das funktioniert sogar!

else if (1 == info)
{
  ...
  link.setAttribute('name', id);
  link.onclick = function ()  
  {
    ref.prepareRequest('get', this.name);
  }
}

Ein Hinweis noch. Jetzt versteht ihr sicher, warum wir im window.onload die Referenzvariable ref nicht mit einem var versehen haben.

4. Das werden ja immer mehr

Klickt jetzt mal spaßeshalber wie die Bekloppten in den select-Feldern herum. Da werdet ihr feststellen, dass sich eure Links vermehren wie die Karnickel. Ist ja auch kein Wunder. Die hängen wir immer und immer wieder an die bereits bestehenden dran. Um das Problem zu umgehen, sollte man vorher alles, was sich im div-Element namens result befindet, gnadenlos killen. Und dazu benötigt man zu Beginn der Methode manipulateCompanies nur folgenden Code.

function manipulateCompanies ()
{
  var result = document.getElementById('result');
  while (result.hasChildNodes())
  {
    var wech = result.firstChild;        
    result.removeChild (wech);
  }
  ...
}  

weiter zum nächsten Abschnitt