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. Eine Feinheit
Man könnte nun denken, dass folgender Code den Event-Handler auf den Link legt.
link.setAttribute('onclick','ref.prepareRequest("get",' + id + ');');
Das klappt so weit auch ganz gut, aber ich will euch noch auf ein Problem hinweisen. Darum nehmen wir den folgenden Code.
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);
}
...
}
Erläuterung
Also, zu var result = document.getElementById('result'); sage ich jetzt gar nichts mehr! Ende! Aus! Allerdings bedarf
die Schleife einer genaueren Erläuterung. Mit while (result.hasChildNodes()) schauen wir nach, ob obiges
div-Element noch über wie auch immer geartete Kindelemente verfügt. Und solange dem so ist, suchen wir uns immer
das Erste aus (var wech = result.firstChild;) und löschen es anschließend mit result.removeChild
(wech);. Eine sehr elegante (wenn auch nicht immer performante) Möglichkeit, um alles wegzuhauen, was einem im Weg steht.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt