DOM - dynamische Erzeugung einer Verweisliste

[enrico]

Hallo und guten Abend,

ich stehe vor einem riesengroßen Problem, v.a. weil dies meine ersten Berühungspunkte mit DOM sind:

Ich will für meine DVD-Verwaltung folgende drei Filterfunktionen einbinden:

1) div "Ebene_Anfangsbuchstabe":
      Enthält einen Buchstabenindex aller Filmtitel

2) div "Ebene_Genre":
      Enthält alle Genres meiner Sammlung

3) div "Ebene_Altersfreigabe":
      Enthält alle Altersfreigaben meiner Sammlung

Bei allen drei div-Bereichen wird aber jeweils nur ein Vorkommen der Anfangsbuchstaben, Genres bzw.
der Altersfreigaben gespeichert.

Um die Filterung letztendlich auch durchführen zu können, habe ich ein drei versteckte Formularfelder
definiert:

<input type="hidden" name="Anfangsbuchstabe" value="">
   <input type="hidden" name="Genre"            value="">
   <input type="hidden" name="FSK"              value="">

Über eine - später noch einzubauende - Funktion werden die einzelnen Werte dann abgefragt und die
Filterung entsprechend ausgeführt.

Zurück zu meinem "Fall":

Der Buchstabenindex, die Liste der Genres und der Altersfreigaben sollen als Verweise in folgender
Art dynamisch in den HTML-Code eingebunden werden:

Hier am Beispiel der Erzeugung des Buchstabenindex:

<a href="javascript:void(0);"
      onClick="document.Filterparameter.Anfangsbuchstabe.value = Anfangsbuchstabe;this.blur();">

Wenn mein Index beispielsweise die Buchstaben "A", "D" und "J" enthalten sollte, dann soll der
div "Ebene_Anfangsbuchstabe" folgenden Aufbau haben:

<div id="Ebene_Anfangsbuchstabe">

<a href="javascript:void(0);"
         onClick="document.Filterparameter.Anfangsbuchstabe.value = 'A';this.blur();">
      </a>

<a href="javascript:void(0);"
         onClick="document.Filterparameter.Anfangsbuchstabe.value = 'D';this.blur();">
      </a>

<a href="javascript:void(0);"
         onClick="document.Filterparameter.Anfangsbuchstabe.value = 'J';this.blur();">
      </a>

</div>

Nun fängt mein Problem an:

Da es sich hierbei ja um richtigen HTML-Code handelt, der auch ausführbar sein und auch, entgegen
reiner Textausgaben, eine Funktion haben soll, nämlich durch Anklicken eine bestimmte Aktion
auszuführen, muß ich die einzelnen div-Bereiche über das DOM befüllen lassen.

Mein derzeitiger Ansatz sieht folgendermassen aus:

var Ebene   = window.document.getElementById ("Ebene_Anfangsbuchstabe");

for (var i = 0; i < Film.length; ++i)
   {
      Anfangsbuchstabe = Film[i]["Titel"].substring (0,1);

if (!Liste_Anfangsbuchstaben.Im_Array_enthalten (Anfangsbuchstabe))
      {
         Liste_Anfangsbuchstaben.push (Anfangsbuchstabe);

var Verweis = window.document.createElement ("a");
         Verweis.setAttribute ("href", "javascript:void(0);");
         Verweis.setAttribute ("onClick", "document.Filterparameter.Anfangsbuchstabe.value=Anfangsbuchstabe");
         Ebene.appendChild    (Verweis);
      }

.....
   }

Aber - leider bzw. wie schon befürchtet - wird der Code nicht erzeugt, auf der anderen Seite erhalte ich
über die Mozilla Fehler-Konsole auch keine Fehlermeldung.

Hier meine Fragen:

1. Habe ich mit meinem Ansatz denn überhaupt die richtige Richtung eingeschlagen?
      Warum wird mir der Code nicht entsprechend erzeugt?

2. Wie über DOM einen Variablenwert übergeben?
      Dies hinsichtlich der Übergabe der Variablen "Anfangsbuchstabe".

3. Wie Anweisung "onClick="this.bur();" ergänzen?

Könnte Ihr mir hier weiterhelfen?

Ich bitte Euch, mir möglichst ausführlich zu antworten, da ich bislang mit DOM noch überhaupt nichts zu tun hatte.

Vielen, vielen lieben Dank im Voraus.

Gruß
Enrico

[Christian S.]

Hi,

was ich noch verstehe: woher kommt der Buchstabenindex? Also wieso nur A, D, J und nicht das ganze Alphabet?

<a href="javascript:void(0);"
         onClick="document.Filterparameter.Anfangsbuchstabe.value = 'A';this.blur();">
      </a>

Hier fällt schon mal auf, dass der Textwert (vermutlich der Buchstabe selber) zwischen den beiden Tags fehlt.

Da es sich hierbei ja um richtigen HTML-Code handelt, der auch ausführbar sein und auch

HTML Code ist nicht ausführbar. JavaScript schon.

Mein derzeitiger Ansatz sieht folgendermassen aus:

var Ebene   = window.document.getElementById ("Ebene_Anfangsbuchstabe");

for (var i = 0; i < Film.length; ++i)
   {
      Anfangsbuchstabe = Film[i]["Titel"].substring (0,1);

if (!Liste_Anfangsbuchstaben.Im_Array_enthalten (Anfangsbuchstabe))
      {
         Liste_Anfangsbuchstaben.push (Anfangsbuchstabe);

var Verweis = window.document.createElement ("a");
         Verweis.setAttribute ("href", "javascript:void(0);");
         Verweis.setAttribute ("onClick", "document.Filterparameter.Anfangsbuchstabe.value=Anfangsbuchstabe");
         Ebene.appendChild    (Verweis);
      }

.....
   }

Da fällt wieder nur auf, dass du, wie oben schon, den Text für den Link nicht angibst.

Diesen kannst du im DOM über document.createTextNode("text") erzeugen. Und als Knoten anhängen:

Verweis.appendChild(document.createTextNode("text"));

Habe in dem Zusammenhang mal gehört, dass man keine DOM Änderungen an Knoten machen soll, die noch nicht ins DOM eingefügt wurden. Oder bzw. keine Kindknoten an Knoten hängen, die noch "in der Luft hängen". Das soll zu Memory Leaks im IE führen.
Also erst Verweis ins DOM anfügen, dann den Text.

Hier meine Fragen:

1. Habe ich mit meinem Ansatz denn überhaupt die richtige Richtung eingeschlagen?

Dazu fehlt mir der richtige Überblick, was du überhaupt erreichen willst. Ob JavaScript hier der richtige Ansatz ist, oder ob du sowas doch lieber serverseitig erzeugen solltest, kann man nicht beurteilen... also ich nicht.

Generell lässt sich sagen, dass du nicht unbedingt ein a Element brauchst um ein onclick abzufangen. Dann könntest du dir das href=javascript:void(0) usw. sparen.

Außerdem würde ich Events nicht per setAttribute anhängen. Um ein Event an ein DOM Element zu hängen, gibt es elegantere Methoden, obwohl IE leider noch nicht die Standards unterstützt. Stichwort: addEventListener / attachEvent.

onClick als Attribute sollte in XHTML kleingeschrieben werden.

Warum wird mir der Code nicht entsprechend erzeugt?

Vermutlich siehst du nichts? wegen des fehlenden Textes?

2. Wie über DOM einen Variablenwert übergeben?
      Dies hinsichtlich der Übergabe der Variablen "Anfangsbuchstabe".

bei deiner Methode würde es wahrscheinlich schon so gehen:

Verweis.setAttribute ("onClick", "document.Filterparameter.Anfangsbuchstabe.value=" + Anfangsbuchstabe);

bei der anderen Methode sollte es etwa so gehen (ungetestet):

Verweis.addEventListener("click", function(){document.Filterparameter.Anfangsbuchstabe.value = Anfangsbuchstabe}, false);

3. Wie Anweisung "onClick="this.bur();" ergänzen?

Verstehe das Problem nicht. Benutze kein a element, dann brauchst du das ohnehin nicht.

Ich empfehle dich mit EventHandling auseinander zusetzen, auch wenn's durch die vielen Browserunterschiede ein haariges Thema ist.

http://www.quirksmode.org/js/contents.html#events

Gruß
Christian

[enrico]

Hallo Christian,

Danke für Deine Rückantwort.

woher kommt der Buchstabenindex? Also wieso nur A, D, J und nicht das ganze Alphabet?

Das war nur ein Beispiel.

Das ganze Alphabet deshalb nicht von Haus aus, weil der Index anhand der in der Datei
definierten Filme erzeugt wird.

Ist dort kein Film enthalten, der mit "Q" beginnt, so wird dieser Buchstabe auch nicht
in den Index aufgenommen.

Wie bereits beschreben, dies war nur ein Beispiel.

"Live" stammt der Index aus einer eingelesenen js-Datei, die sämtliche Filme enthält.

Hier werden dann die Anfangsbuchstaben herausgefiltert und der Index erzeugt (was klappt).

<a href="javascript:void(0);"
   onClick="document.Filterparameter.Anfangsbuchstabe.value = 'A';this.blur();">
</a>

Hier fällt schon mal auf, dass der Textwert (vermutlich der Buchstabe selber) zwischen den beiden Tags fehlt.

Da hast Du recht, ich habe in meinem _Beispiel_ (oje oje, selbst in einem Beispiel habe ich
formelle Fehler gemacht...) tatsächlich den Buchstaben vergessen, der ja den Link im Browser ausgibt.

Die Links sollen folgenden Aufbau haben:

<a href="javascript:void(0);"
      onClick="document.Filterparameter.Anfangsbuchstabe.value = 'A';this.blur();">A
   </a>

HTML Code ist nicht ausführbar. JavaScript schon.

Ich möchte, dass in meinem Dokument bzw. um Mißverständnissen vorzubeugen, im Browserfenster letztendlich
ein anklickbarer Buchstabenindex mit einem Buchstaben pro Zeile angezeigt wird. Nach Anklicken eines
Buchstabens soll dann der angeklickte Buchstabe dem Formularfeld "Anfangsbuchstabe" übergeben werden:

Verweis.setAttribute ("onClick", "document.Filterparameter.Anfangsbuchstabe.value=" + Anfangsbuchstabe);

Hier bereits mit Deinem Korrekturvorschlag.

Verweis.appendChild(document.createTextNode("text"));

Bei Deinem Vorschlag habe ich einen einzigen Verweis mit allen Buchstaben, es soll aber pro Buchstaben
eine eigene Zeile verwendet werden, d.h. jeder Buchstaben-Link steht in einer eigenen Zeile.

Zumindest habe ich jetzt schon mal eine Bildschirmausgabe, wenn auch noch nicht so wie gewünscht.

Also erst Verweis ins DOM anfügen, dann den Text.

Was meinst Du damit konkret? Ich verstehe nur Bahnhof...

obwohl IE leider noch nicht die Standards unterstützt. Stichwort: addEventListener / attachEvent

Da die Seite nur lokal auf meinem Rechner laufen wird und ich nur mit Mozilla surfe, ist es für mich
nicht notwendig, etwaige Alternativen zu berücksichtigen.

Welche - für Dich - optimale Lösung würdest Du denn vorschlagen?

Gruß
Enrico

[molily]

Hallo,

Da die Seite nur lokal auf meinem Rechner laufen wird und ich nur mit Mozilla surfe, ist es für mich
nicht notwendig, etwaige Alternativen zu berücksichtigen.

Wenn es nur im Gecko laufen soll, kannst du auch einfach

Verweis.setAttribute("onclick", "document.Filterparameter.Anfangsbuchstabe.value = '" + Anfangsbuchstabe + "'; this.blur();");

schreiben (die Anführungszeichen beachten).

Der entstehende Attributwert ist dann z.B.

document.Filterparameter.Anfangsbuchstabe.value = 'A'; this.blur();

Mathias

[enrico]

Hallo Mathias,

der Index wird ausgegeben, aber wie ich bereits Christian geschrieben habe,
in einer Zeile. Wir bekomme ich hier einen Zeilenumbruch nach jedem
Buchstaben hin?

Zudem habe ich folgende Fehlermeldung in der Konsole:

Fehler: window.document.Filterparameter has no properties

Dir auch vielen Dank für Deine Mithilfe.

Ich muß mich jetzt leider zurückziehen, muß heute um 5 raus.

Gute Nacht an Alle,
bis heute...

Viele Grüße,
Enrico

[molily]

Hallo,

Wir bekomme ich hier einen Zeilenumbruch nach jedem Buchstaben hin?

Du erzeugst dynamisch HTML. Also: Genauso, wie du einen Zeilenumbruch in HTML hinbekommst. Du verpackst die Link-Elemente in passende Elementstrukturen wie z.B. ol/li.

Zudem habe ich folgende Fehlermeldung in der Konsole:

Fehler: window.document.Filterparameter has no properties

Dann gibt es kein Formularelement mit name="Filterparameter" bzw. id="Filterparameter".

Mathias

[molily]

Hallo,

Verweis.setAttribute ("onClick", "document.Filterparameter.Anfangsbuchstabe.value=Anfangsbuchstabe");

Werte von String-Variablen in einem String einmontieren geht mit dem Operator »+«.

Event-Handler solltest du aber immer mit dem Schema element.onevent = handlerfunktion; notieren.

Das geht beides nicht so einfach zusammen, deshalb musst du den Anfangsbuchstaben woanders speichern. Sinnigerweise in einem Textknoten, der ein Kind des erzeugten e-Elements ist.

var textNode = document.createTextNode(Anfangsbuchstabe);  
Verweis.appendChild(textNode);

Dann der Event-Handler:

Verweis.onclick = buchstabenfilter;

Woanders deklarierst du die Funktion, in der du auf den Textknoten zugreifst und seinen Inhalt ausliest:

function buchstabenfilter () {  
   var anfangsbuchstabe = this.firstChild.nodeValue;  
   document.Filterparameter.Anfangsbuchstabe.value = anfangsbuchstabe;  
   this.blur();  
}

Es gäbe natürlich noch andere Möglichkeiten.

1. Habe ich mit meinem Ansatz denn überhaupt die richtige Richtung eingeschlagen?
      Warum wird mir der Code nicht entsprechend erzeugt?

Das a-Element enthält keinen Inhalt, ist also vermutlich 0 Pixel breit.

2. Wie über DOM einen Variablenwert übergeben?
      Dies hinsichtlich der Übergabe der Variablen "Anfangsbuchstabe".

Siehe oben. Du willst eher einen Event-Handler registrieren.

3. Wie Anweisung "onClick="this.bur();" ergänzen?

Anweisungen werden durch ein Semikolon getrennt.

Mathias