DOM-Manipulation JavaScript - Praxistutorial 2 - Die Initialisierung
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 Konstruktorfunktion
... nennen wir in diesem Fall einfach mal ajaxTut
. Sie benötigt als Parameter ein Array, in dem die Namen
der einzelnen select
-Felder enthalten sind. Zusätzlich brauchen wir zwei weitere Variablen für die Steuerung.
Damit wir sie aber nur innerhalb der "Klasse" verändern können, deklarieren wir sie mittels var
als
"privat", so dass nicht die Gefahr besteht, dass man von außerhalb darauf zugreifen kann.
function ajaxTut (fields)
{
// Angabe aller vorhandenen Select-Felder
var input = fields;
// Referenz auf das Formular
var form = document.anfrage;
// Beinhaltet die ausgewählten Werte der Select-Felder
var select = new Array();
}
3. Das Anlegen der Event-Handler
... wollen wir diesmal komplett dynamisch machen. Gut, so ganz dynamisch wird das später nicht werden, aber das liegt an JavaScript und nicht an mir ;-).
window.onload = function ()
{
document.anfrage.reset();
var fields = new Array();
var selects = document.getElementsByTagName('select');
for (i = 0; i < selects.length; i++)
{
fields.push(selects[i].name);
document.anfrage[selects[i].name].onchange = function ()
{
ref.prepareRequest('post');
}
}
ref = new ajaxTut(fields);
}
Erläuterung
document.anfrage.reset();
habe ich nur eingebaut, weil der Firefox nach einem Aktualisieren der Seite sich schon vorher
ausgewählte Werte der select
-Elemente merkt und mich das einfach nervt. Mit var selects =
document.getElementsByTagName('select');
bekomme ich alle Felder aus unserem Formular in einem Array zurückgeliefert..
Da in diesem Array aber nur Referenzen abgelegt sind, holen wir uns innerhalb der Schleife die Namen der select
-Felder
und schreiben sie in das andere Array (fields.push(selects[i].name);
). Danach wird auf Erstere der entsprechende
Event-Handler onchange
gelegt. Bitte kommt nicht in Versuchung, ein onclick
auf die einzelnen
option
-Elemente zu setzen, denn da macht der Internet Explorer schlapp.
Die Referenz
... auf das Objekt wird erst nach der Schleife erzeugt (ref = new ajaxTut(fields);
), trotzdem können wir aber vorher
schon in der Schleife (ref.prepareRequest('post');
) darauf zugreifen. Wie geht das? Nun ganz einfach, die Referenz
wird beim onload
ja schon erzeugt. Darauf zugreifen tun wir aber erst bei einem onchange
und das tritt
definitiv erst später auf. Also funktioniert es. Noch etwas, diese Referenz muss global verfügbar sein, darum packt bitte kein
var
davor.
Die Parameter
Der Konstruktorfunktion ajaxTut
übergeben wir das Array mit den Namen aller select
-Felder. Den Parameter
für die anschließend kommende Methode prepareRequest
brauchen wir, um später eine Unterscheidung zu treffen, da wir
einmal mit POST
und ein anderes Mal mit GET
als Übertragungsmethode arbeiten werden.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt