getElementById erkennt ID nicht mehr
Eingetragen von ampersand (10)am 03.12.2009 - 11:51 Uhr in
Hallo,
Drupal: 6.10, genutzter Browser IE8
ich habe ein Modul entwickelt, mit dem ich bestimmte Elemente einer Seite unsichtbar machen kann.
Das Modul ist an sich recht einfach und hat bis gestern auch noch funktioniert. Seit heute Morgen erhalte ich jedoch einen Fehler auf der Seite, den ich mir nicht erklären kann.
Zunächst aber mal der Code:
Datei: meCascade.js
<?php
if (Drupal.jsEnabled) {
addLoadEvent(startToggle());
}
function startToggle()
{
toggleNextByIdAndTag2('FeatureList', 'dt');
}
function toggleNextByIdAndTag2(el,tname) {
var ccn="clicker";
//document.write(' start ' +el+' - '+tname+'</br>');
var clickers=document.getElementById(el).getElementsByTagName(tname);
document.write(' clickers ' +clickers+'</br>');
for (i=0; i<clickers.length; i++) {
clickers[i].className+=" "+ccn;
clickers[i].onclick=function() {meToggleDD(this,tname)}
meToggleDD(clickers[i],tname,1); //Nötig, damit DTs einmal geschlossen werden
}
openDTElement(clickers[0], tname, "Leistungserfassung");
}
function meToggleDD(el, tname, first)
{
var tagDD = "dd";
document.write(' *el ' + el.outerHTML + ' el.id '+ el.id +'</br>');
var dtId = el.id;
document.write(' *tags ' + tags.length + '</br>');
var current = el.nextSibling;
document.write(' current ' + current.outerHTML + '</br>');
while(current.nodeType!=1) current=current.nextSibling;
document.write(' current ' + current + ' nodeName: '+current.nodeName+'</br>');
while (current != null && current.nodeName == "DD")
{
document.write(' while current ' + current.outerHTML + " display "+current.style.display+'</br>');
current.style.display=((current.style.display=="none") ? "block" : "none");
current = current.nextSibling;
}
}
function openDTElement(el, tname, id)
{
var current = el.nextSibling;
while(current.nodeType!=1) current=current.nextSibling;
while (current != null && current.nodeName == "DD")
{
document.write(' while current ' + current.outerHTML + " display "+current.style.display+'</br>');
current.style.display= "block";
current = current.nextSibling;
}
}
?>Die .js Datei wird in meCascade.module geladen:
<?php
<?php
// $Id: meCascade.module $
/**
* @file
* Funktionen für ME Kaskade
*/
/* .. hier noch mehr Code */
/**
* Load needed files.
*/
function meCascade_load() {
static $loaded = FALSE;
if (!$loaded) {
$path = drupal_get_path('sites', 'meCascade');
drupal_add_js('sites/all/modules/custom/meCascade/meCascade.js');
$loaded = TRUE;
}
}
?>HTML Code der Seite:
<div id="learn-subnav-container">
<dl id="FeatureList">
<dt id="Leistungserfassung" class="Leistungserfassung">Leistungserfassung</dt>
<dd id="Leistungserfassung"><a href="/Features2.html?section=Zeiterfassung" class="sectionlink" id="idSection_Zeiterfassung">Zeiterfassung</a></dd>
<dd id="Leistungserfassung"><a href="/Features2.html?section=Aufwandserfassung" class="sectionlink" id="idSection_Aufwandserfassung">Aufwandserfassung</a></dd>
<dd id="Leistungserfassung"><a href="/Features2.html?section=Preisliste" class="sectionlink" id="idSection_Preisliste">Preisliste</a></dd>
<dd id="Leistungserfassung"><a href="/Features2.html?section=Freigabe-Workflow" class="sectionlink" id="idSection_Freigabe-Workflow">Freigabe-Workflow</a></dd>
<dt class="Kunden" id="Kunden">Kunden und Kontakte</dt>
<dd id="Kunden">Kundenverwaltung</dd>
<dd id="Kunden">Ansprechpartner</dd>
<dd id="Kunden">Zugriff</dd>
<dt class="Projekte" id="Projekte">Projektverwaltung</dt>
<dd id="Projekte1">Projekthierarchie</dd>
<dd id="Projekte2">Budget</dd>
<dd id="Projekte3">Kennzahlen</dd>
<dt class="Abrechnung" id="Abrechnung">Abrechnung</dt>
<dd id="Abrechnung1">Abrechnung</dd>
</dl>
</div>Der Fehler tritt bei der Ermittlung des DL Elements in meCascade.js auf:
<?php
function toggleNextByIdAndTag2(el,tname) {
var ccn="clicker";
//document.write(' start ' +el+' - '+tname+'</br>');
var clickers=document.getElementById(el).getElementsByTagName(tname);
document.write(' clickers ' +clickers+'</br>');
?>Beim Laden der Seite bringt die zeile "var clickers=document.getElementById(el).getElementsByTagName(tname);"
den Fehler:
Details zum Fehler auf der Webseite
Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.3; InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Zeitstempel: Thu, 3 Dec 2009 10:36:00 UTC
Meldung: 'document.getElementById(...)' ist Null oder kein Objekt
Zeile: 15
Zeichen: 2
Code: 0
URI: http://xxxx/sites/all/modules/custom/meCascade/meCascade.js?v
Zeile 15 ist die o.g. Zeile.
Als Parameter wird der Methode 'FeatureList' übergeben, das meiner Meinung nach
- finden sollte. Ich vermute mal, dass aus irgendeinem Grund die Seite noch nicht aufgebaut ist, und das JavaScript schon vorher aufgerufen wird. Ich war allerdings der Meinung, dass das addLoadEvent genau das verhindert?!
Da der Code gestern noch funtkioniert hat, habe evtl. irgendwo etwas in Drupal verändert, was ihn nun veranlasst das JavaScript vorher auszuführen.
Ich hoffe Ihr könnt mir einen Tipp geben.
Dirk
- Anmelden oder Registrieren um Kommentare zu schreiben
jQuery
am 03.12.2009 - 11:53 Uhr
Ich hoffe Ihr könnt mir einen Tipp geben.
Verwende jQuery.
Stefan
--
Sei nett zu Deinem Themer!
Neben dem Kommentar von
am 03.12.2009 - 12:15 Uhr
Neben dem Kommentar von stBorchert solltest du vlt. noch einmal deine Seite auf evtl. doppelt verwendete IDs im Quelltext prüfen.
Dies würde auch dazu führen, dass die ID nicht durch dein Javascript gefunden wird..
Zum Thema jquery Selektoren kannst du dich hier belesen:
http://docs.jquery.com/Selectors
Danke für Eure
am 03.12.2009 - 13:58 Uhr
Danke für Eure Hinweise.
Ich beschäftige mich noch nicht lange mit der Programmierung in Drupal. ich habe wohl etwas voreilig zu javascript gegriffen, da ich jQuery noch nicht auf dem Radar hatte. Ich werde mir jetzt jQuery mal vornehmen.
Allerdings habe ich dem Hinweis von steffenR folgend einfach mal die Id von 'FeatureList' auf einen Wert gesetzt, der garantiert nirgends verwendet wird. Die Fehlermeldung bleibt die gleiche. Und es würde mich schon interessieren, warum das Skript das Element mit der Id nicht findet.
Grüße
Dirk
ampersand schrieb Danke
am 03.12.2009 - 14:20 Uhr
Danke für Eure Hinweise.
Ich beschäftige mich noch nicht lange mit der Programmierung in Drupal. ich habe wohl etwas voreilig zu javascript gegriffen, da ich jQuery noch nicht auf dem Radar hatte. Ich werde mir jetzt jQuery mal vornehmen.
Allerdings habe ich dem Hinweis von steffenR folgend einfach mal die Id von 'FeatureList' auf einen Wert gesetzt, der garantiert nirgends verwendet wird. Die Fehlermeldung bleibt die gleiche. Und es würde mich schon interessieren, warum das Skript das Element mit der Id nicht findet.
Grüße
Dirk
Wenn man sich den HTML Code mal genauer anschaut fällt dabei auf, dass du hier recht viele IDs doppelt verwendest - dies kann dann so auch nicht funktionieren. Eine ID muss auf einer Seite eineindeutig sein. Nur Klassen können mehrmals verwendet werden. Hier solltest du dich HTML / CSS technisch vlt. noch einmal schlau lesen !
Hallo steffen,Du hast
am 03.12.2009 - 15:29 Uhr
Hallo steffen,
Du hast recht. Ich habe versehentlich einen HTML-Code gepostet, an dem ich "rumprobiert" habe. Sorry dafür.
Der Originalcode ist eigentlich folgender und hat eindeutige IDs:
<dl id="FeatureList"><dt id="Leistungserfassung" class="Leistungserfassung">Leistungserfassung</dt>
<dd id="Leistungserfassung1"><a href="/Features2.html?section=Zeiterfassung" class="sectionlink" id="idSection_Zeiterfassung">Zeiterfassung</a></dd>
<dd id="Leistungserfassung2"><a href="/Features2.html?section=Aufwandserfassung" class="sectionlink" id="idSection_Aufwandserfassung">Aufwandserfassung</a></dd>
<dd id="Leistungserfassung3"><a href="/Features2.html?section=Preisliste" class="sectionlink" id="idSection_Preisliste">Preisliste</a></dd>
<dd id="Leistungserfassung4"><a href="/Features2.html?section=Freigabe-Workflow" class="sectionlink" id="idSection_Freigabe-Workflow">Freigabe-Workflow</a></dd>
<dt id="Kunden" class="Kunden">Kunden und Kontakte</dt>
<dd id="Kunden1">Kundenverwaltung</dd>
<dd id="Kunden2">Ansprechpartner</dd>
<dd id="Kunden3">Zugriff</dd>
<dt id="Projekte" class="Projekte">Projektverwaltung</dt>
<dd id="Projekte1">Projekthierarchie</dd>
<dd id="Projekte2">Budget</dd>
<dd id="Projekte3">Kennzahlen</dd>
<dt id="Abrechnung" class="Abrechnung">Abrechnung</dt>
<dd id="Abrechnung1">Rechnung</dd>
</dl>
Der Fehler beim getElementById besteht aber auch mit diesem.
Dirk
Die Fehlermeldung ist, wenn
am 03.12.2009 - 22:47 Uhr
Die Fehlermeldung ist, wenn die #id wirklich eindeutig ist, nicht zu verstehen. Allerdings könntest du deinen gesamten Code mit der Hilfe von jQuery auf wenige Zeilen eindampfen.
jQuery hat auch den Vorteil, dass es Unzulänglichkeiten einiger Browser elegant ausgebügelt und so schon von sich aus mögliche Fehlerquellen beseitigt werden.
Wenn du eine Webseite mit dem laufenden Code online stellst, kann man nochmal etwas genauer schauen.
Ich bin nun auf jQuery
am 09.12.2009 - 08:31 Uhr
Ich bin nun auf jQuery umgestiegen und konnte die Anforerung wie gewünscht umsetzen.
Danke erstmal für Eure Hilfe.