JavaScript DIV erscheint nach anderer Aktion nicht mehr

Riker

Lieutenant
Registriert
Jan. 2005
Beiträge
862
Hallo zusammen,

ich habe folgendes Problem:

ich habe eine Tabelle (innerhalb eines Forms). Diese Tabelle wird genutzt, um Benutzereingaben entgegenzunehmen. In dieser Tabelle bereitet mir eine Spalte Sorgen:
Diese hat folgende Eingabemöglichkeiten:
[DATUM] - [UHRZEIT] und dann folgen 2 "Links", welche durch Images dargestellt werden.

Der erste Link öffnet einen Kalender, so dass der User über diesen Kalender ein Datum auswählen kann. Der zweite Link stellt ein DIV auf visible (per JavaScript), so dass sich der User die Historie der letzten 10 Einträge ansehen kann.

_Problem_: Es funzt alles wunderbar. Bis auf folgenden Punkt:
klickt der User auf das Datumsfeld, nimmt der zweite "Link" nichts mehr entgegen. Sprich: das DIV wird weder wieder Hidden noch Visible. Andersrum das gleiche Spiel. Sollte der User das DIV bereits Visible gemacht haben und klickt dann auf den Datepicker, dann kann er das DIV nicht mehr Hidden machen.
FireBug zeigt mir an, dass der JavaScript Code immer (also in jedem Fall) sauber durchlaufen wird Oo

Im Internet Explorer FUNKTIONIERT alles. Nur der Mozilla Firefox muckt hier rum... :( :( :(

Hier noch ein paar Codeschnipsel:

Code:
<td><input type="text" name="endDate" style="width: 80px" id="endDate" value="{$DATE|escape}"> -
<input type="text" name="time" id="time" value="{$TIME|escape}" style="width: 40px;" />
<a href="javascript:void('');"><img src="/images/datepicker.gif" width="19" height="19" alt="{'CALENDER_INFO'|gettext}" title="{'CALENDER_INFO'|gettext}" id="f_trigger_endDate" style="border: 0px;" /></a>
<a href="javascript:void('');"><img src="/images/loms/arrow_down.gif" onclick="mopen('dropdown')" alt="{'HISTORY'|gettext}" title="{'HISTORY'|gettext}" style="border: 0px;" /></a>
<div id="dropdown" style="position: absolute;visibility: hidden;">{html_options options=$options name="history"}</div>

<script type="text/javascript">
  {literal}
    Calendar.setup({
     inputField : "endDate",
     ifFormat   : "%d.%m.%Y",
     daFormat   : "%d.%m.%Y",
     button     : "f_trigger_endDate"
     });
  {/literal}
</script>

</td>

Und hier der JavaScript Teil des DIV:

Code:
var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{	
	var ddmenuitem = document.getElementById(id);
	if (ddmenuitem.style.visibility == 'visible') {
		ddmenuitem.style.visibility = 'hidden';
	}
	else {
		ddmenuitem.style.visibility = 'visible';
	}
}

Evtl. könnte mir wer helfen. Wäre schön :)

Danke und Grüße!
 
Zuletzt bearbeitet:
Der Code von mopen sollte so funktionieren, auch im Firefox.
Fehler liegt also woanders.

Benutzt Du Smarty? Wird das ein Template und daher die Pfade zum root?
{literal} innerhalb von Script gewünscht (nicht drumherum)?
Warum kein vollständiger Code?
Wofür verwendest Du timeOut und closetimer? Liegt da der Hund begraben?
Wodurch schließt sich 'dropdown' wieder? Ist dropdown eine eindeutige ID, die
nur ein einziges Mal verwendet wird?
Warum keine Angabe der Firefox Version, in der es "muckt"?
Warum doppelte Deklaration von ddMenuItem?

<a href="javascript:void('');"><img src="/images/loms/arrow_down.gif" onclick="mopen('dropdown')">...
finde ich nicht so elegant, Link um ein Image mit onClick???

Würde es eher so lösen:
<a href="#" onclick="mopen('dropdown'); return false;"><img src="/images/loms/arrow_down.gif">...
Durch das return false wird der Inhalt von href nicht mehr ausgewertet.
Ist aber eher auch nicht die Problemursache.

Versuche mal den Code zu reduzieren auf ein kurzes Beispiel, welches das Problem vollständig zeigt.
Und gib' bitte die Firefoxversion an, die Probleme macht.
 
Zuletzt bearbeitet:
Danke schon einmal für Deine Antwort!

Hier die Antworten auf Deine Fragen:

Benutzt Du Smarty? Wird das ein Template und daher die Pfade zum root?

Genau

{literal} innerhalb von Script gewünscht (nicht drumherum)?

Ist ja Geschmacksache ;)

Warum kein vollständiger Code?

Was möchtest Du denn noch haben?
Das ist doch der springende Fehlerhafte Punkt und ich habe das Template und das sich darauf beziehende JS angegeben...

Wofür verwendest Du timeOut und closetimer? Liegt da der Hund begraben?

Ich hatte das ganze vorerst versucht, anders zu implementieren... Ist also noch "Restcode". Habe es nun rausgenommen und nein: das war nicht der springende Punkt :/

Wodurch schließt sich 'dropdown' wieder? Ist dropdown eine eindeutige ID, die
nur ein einziges Mal verwendet wird?

Ja - "dropdown" ist eine eindeutige ID und wird immer verwendet.
Ich stelle es doch im oben aufgeführten JS Teil auf "visible" und "hidden". Reicht das nicht aus? Muss ich das irgendwo noch explizit "schließen" (und nicht nur auf "hidden" stellen)?

Jedoch auch wenn ich den JS Teil von

Code:
function mopen(id)
{	
	var ddmenuitem = document.getElementById(id);
	if (ddmenuitem.style.visibility == 'visible') {
		ddmenuitem.style.visibility = 'hidden';
	}
	else {
		ddmenuitem.style.visibility = 'visible';
	}
}

zu

Code:
function mopen(id)
{	
	//var ddmenuitem = document.getElementById(id);
	if (document.getElementById(id).style.visibility == 'visible') {
		document.getElementById(id).style.visibility = 'hidden';
	}
	else {
		document.getElementById(id).style.visibility = 'visible';
	}
}

ändere bessert sich nichts...

Warum keine Angabe der Firefox Version, in der es "muckt"?

Hier: 11.0 (seit gestern) - zuvor die Version 10.schlagmichtot :/

Warum doppelte Deklaration von ddMenuItem?

Ebenfalls alter Code: bereinigt...

finde ich nicht so elegant, Link um ein Image mit onClick???

Habe es damit mal ausprobiert - stecke noch beim gleichen Ergebnis.


Danke nochmal und beste Grüße!
 
Der Code, den Du geliefert hast (mopen) funktioniert im Firefox, habe ich auch dutzendfach schon so gemacht. Alles gut damit (die Codeleichen sind ja jetzt auch weg).
Daher muss der Fehler woanders liegen.

Ich stelle es doch im oben aufgeführten JS Teil auf "visible" und "hidden". Reicht das nicht aus? Muss ich das irgendwo noch explizit "schließen" (und nicht nur auf "hidden" stellen)?
Reicht. Alternativ macht man auch mal display:block vs. display:none, aber ist Geschmackssache/abhängig von Einsatzzweck.

Mit Deinen Codeschnipseln konnte ich das Problem nicht reproduzieren/testen und fische daher etwas im Trüben (auch bezügl. verwendetem Doctype, Codeprobleme, sonstige Strukturen etc).
Hab' in den nächsten Tagen hier leider wenig Zeit, aber was Du noch versuchen kannst:
  • bennene "dropdown" (und die Verweise darauf) um, nicht dass es daran liegt, dass die id irgendwo im Kalender verwendet wird o.ä. (meine ids bekommen immer einen eindeutigen prefix, damit mir das ja nie passiert...)
  • validiere mal Deinen HTML-Code, um verwaiste Tags, Codefehler etc. auszuschliessen
  • debugge den Code beim Durchlaufen, checke, ob das richtige Element gefunden wird. (bastle Dir notfalls Ausgaben per alert), checke dabei auch in welche Zweige der if-abfrage zum Ein-/Ausblenden der Code läuft.
 
Ich danke Dir jetzt schon vielmals.
Ich habe heute auch mal etwas nachgeforscht und bereits dieser Hinweis von Dir hat mich aufhorchen lassen:
Der Code von mopen sollte so funktionieren, auch im Firefox. Fehler liegt also woanders.
Also habe ich mich auf die Suche gemacht und glaube, den Fehler wirklich in der JS Calendar-"Klasse" gefunden zu haben. Den Calendar hatte ich nicht geschrieben, sondern ein anderer Kollege mal vor Jahren - ich schau mir das mal genauer an, hatte heute leider nur viele andere Sachen um die Ohren und musste das erst einmal ruhen lassen.
Warum ich so zaghaft mit dem Code bin ist, weil es nicht meiner ist und betriebsintern genutzt wird Oo

Danke nochmals für Deine Hilfe! Wenn ich das Problem gelöst habe, poste ich es hier...

Grüße!
 
Zurück
Oben