DOM-Manipulation JavaScript - Praxistutorial 2 - Daten zusammenstellen
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 select-Felder auswerten
Zuerst wollen wir uns mal die ausgewählten Werte holen. Und da das ja nur bei der POST-Variante so sein soll,
legen wir vorab eine entsprechende Bedingung fest. Ach ja, das Array input haben wir ja schon bei der Erzeugung des
Objektes von ajaxTut mit den entsprechenden Feldnamen gefüllt. Also diese komische "Konstruktorfunktion". Somit können
wir auch auf alle select-Felder zugreifen.
this.prepareRequest = function(art, id)
{
...
try
{
...
if ('post' == art)
{
for (i in input)
{
if (0 != form[input[i]].value)
{
str += '&' + input[i] + '=' + form[input[i]].value;
}
}
}
}
...
}
Erläuterung
Mit if (0 != form[input[i]].value) überprüfen wir, ob in dem jeweiligen select-Feld nicht der
Standardeintrag ausgewählt worden ist. Der Rest ist eine stinknormale Zeichenkettenverknüpfung, in der wir GET-Parameter
festlegen.
Warum GET?
Auch wenn wir die Daten später per POST übertragen wollen, so müssen sie, wie oben geschehen, aufgebaut sein. Ist halt
so vorgegeben, sonst werden die Daten nicht versendet.
3. option-Werte merken
Da wir später die select-Felder komplett leeren und dann neu aufbauen, müssen wir uns die ausgewählten Werte merken,
um sie dann mit selected festlegen zu können. Und dafür haben wir zu Beginn ja das Array select angelegt.
...
for (i in input)
{
...
if (form[input[i]].selectedIndex > 0)
{
var index = form[input[i]].selectedIndex;
select[input[i]] = form[input[i]].options[index].value;
}
else
{
select[input[i]] = '0';
}
}
Erläuterung
In JavaScript werden bei select-Feldern alle option-Elemente intern als Array angelegt und das völlig
unabhängig vom jeweils vorgegebenen value-Wert. selectedIndex ist also der numerische Index des
ausgewählten option-Eintrags. Und dessen value-Wert(!) schreiben wir in das "assoziative" Array
select.
4. Felder deaktivieren
Ein Ajax-Request kann je nach Komplexität schon mal ein wenig dauern. Und wenn dann die Leute ihre Gichtgriffel nicht im Zaum halten
und weiter wie die Blöden in den Formularelementen herumklicken, so kann das schon mal eine ziemliche Sauerei geben, oder genauer
gesagt, es knallt irgendwo in der Logik. Um so was zu unterbinden, sollte man die entsprechenden Elemente für die Dauer der Anfrage
auf disabled setzen. Und das geschieht in diesem Fall so.
for (i in input)
{
...
form[input[i]].setAttribute ('disabled', 'disabled');
}
sendPostRequest();
Erläuterung
Man könnte anstelle von setAttribute ('disabled', 'disabled'); auch setAttribute ('disabled', true);
schreiben und es funktioniert trotzdem. Warum ich es nicht mache? Nun ich nehme seit Jahren als
DOCTYPE-Definition XHTML 1.0 Transitional. Und da lautet die korrekte HTML-Version
nun mal <select name="blubb" disabled="disabled">. Das ist der einzige Grund.
Mit sendPostRequest(); rufen wir anschließend die gleichnamige Methode unseres Objektes ajaxTut auf,
die dann die Daten verschickt. Und dazu komme ich jetzt.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt