Hauptmenü

Untermenü

DOM-Manipulation JavaScript - Praxistutorial 2 - Die Initialisierung

1. Die Abschnitte

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 (0selects.lengthi++)
  {
    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