DOM-Manipulation JavaScript - Praxistutorial 2 - Die select
-Felder manipulieren
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 manipulateSelects
... wird wie gehabt ganz normal innerhalb des Objektes ajaxTut
eingebaut. Um euern Verstand ein wenig zu trainieren,
habe ich den Parametern, die wir in der Methode analysePostXml
übergeben, einfach mal andere Namen gegeben. Das schult
den Geist und härtet ab. Und da wir wissen, dass wir hier ein Array verarbeiten müssen, bauen wir die Schleife sofort mit ein.
function ajaxTut(fields)
{
...
function manipulateSelects(result, element)
{
for (var i = 0; i < result.length; i++)
{
...
}
}
}
Jetzt werdet ihr sicher auch verstehen, warum wir in der Methode analysePostXml
die Zählervariable auf privat gesetzt
haben und es hier genau so machen. Denn so kann man in einer Schleife eine weitere erzeugen, ohne dass sich die gleich lautenden
Zählervariablen in die Quere kommen.
3. Die option
-Elemente
Erzeugen und Text einhängen
for (var i = 0; i < result.length; i++)
{
var opt = document.createElement('option');
var eingabe = document.createTextNode (window[element][result[i]]);
opt.appendChild (eingabe);
}
Erläuterung
Wer sich bereits durch das Praxistutorial 1 gearbeitet hat, wird das hier schon kennen.
Mit var opt = document.createElement('option');
erzeugt man ein option
-Element und mit var eingabe =
document.createTextNode (window[element][result[i]]);
einen Textknoten. Nur wie holen wir uns den?
Die einzelnen Arrays in der formular.htm
sind global verfügbar! Und daher können wir jederzeit über das
window
-Objekt darauf zugreifen, auch dynamisch (Dank an Hopka für den Hinweis). element
ist dabei der
Name des Arrays. Und der lautet (mal wieder) genau so, wie der des entsprechenden select
-Feldes. result[i]
als Ergebnis des Ajax-Requests enthält die Zahl, die auf den entsprechenden numerischen Index des aktuellen Arrays in der
formular.htm
verweist. Hier könnt ihr also noch mal sehen, wie eine einheitliche Vergabe von Namen
uns viel Blut, Schweiß und Arbeit erspart. Das nennt sich flexible Programmierung. Zu guter Letzt hängen wir dann besagen Textknoten
in das zuvor erzeugte option
-Element mit opt.appendChild (eingabe);
ein.
Attribute setzen
Davon benötigen wir deren zwei. Zum einen den value
-Wert und zum anderen ein mögliches selected
, wenn denn
vorher etwas anderes als der Standardwert ausgewählt wurde.
for (var i = 0; i < result.length; i++)
{
...
opt.setAttribute('value', result[i]);
if (select[element] == result[i])
{
opt.setAttribute('selected', 'selected');
}
form[element].appendChild(opt);
}
Erläuterung
Mit opt.setAttribute('value', result[i]);
weisen wir dem jeweiligen option
-Element den numerischen
Wert aus den Ajax-Request als value
zu. Aber woher wissen wir, wann wir dem das zusätzliche Attribut selected
verpassen sollen? Erinnert ihr euch noch an die öffentliche Methode prepareRequest
? Da haben wir uns doch den Wert
des ausgewählten option
-Elements gemerkt und in das "assoziative" Array select
geschrieben.
this.prepareRequest = function(art, id)
{
...
if ('post' == art)
{
for (i in input)
{
...
if (form[input[i]].selectedIndex > 0)
{
index = form[input[i]].selectedIndex;
select[input[i]] = form[input[i]].options[index].value;
}
}
}
}
Also überprüfen wir, ob die beiden Werte select[element]
und result[i]
übereinstimmen. Wenn ja, so
verpassen wir dem erzeugten option
-Element das entsprechende Attribut.
Ein Hinweis
opt.setAttribute('selected', 'selected');
ist die XHTML-konforme Version. Möglich wäre auch
opt.setAttribute('selected', true)
. In wieweit das funktioniert, kann ich allerdings nicht beurteilen, da ich seit
Jahren nur noch mit der XHTML-Variante arbeite.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt