Kleine JS-Funktion funktioniert im Firefox nicht wie sie sollte

[Smoothi]

Ich habe eine kleine Funktion, um ein Objekt auszublenden.

function hideElements()
 {
  var elementNames = hideElements.arguments;
  for (var i=0; i < elementNames.length; i++) {
     var elementName = elementNames[i];
     document.getElementById(elementName).style.display='none';
   }
 }

Aufgerufen habe ich das Ganze wie folgt (Benutze JavaEE+JSF):

<input type="Button" class="button_small_right" value="Nein" onclick="hideElements('remove_box')"/>

Die "remove_box" ist eine typische "Möchten Sie wirklich löschen"-Meldung. 🙂 Wenn ich "Nein" drücke, sollte es eben einfach nur wieder ausgeblendet werden.

Jetzt der Witz dabei... im Internetexplorer funktioniert es tadellos. (gerade da *g)
Im Firefox funktioniert das nur mit einem Doppelklick.

Die andere Funktion klappt aber wie sie soll... also diese zum Einblenden, nur dass da anstatt "none" "block" steht.

 

[Evil-Devil]

Hast du schon mit Firebug geschaut ob du vielleicht Null-Referenzen hast und ob hidelEments.arguments überhaupt etwas enthält?
Die Voranstellung vom Namen der Funktion vor arguments ist überflüssig bzw. hinfällig. Hab jedenfalls diese Schreibweise noch nie gesehen.

 

[Smoothi]

Ja den Funktionsnamen kann ich tatsächlich weglassen.

Stimmt... an Firebug hätte ich mal denken können. 😉

<div class="button_box">
    <input type="Button" class="button" value="Löschen" onclick="showElements('remove_box')"/>
</div>

<div id="remove_box" class="remove_box">
    <div class="info">Möchten Sie dieses Objekt wirklich löschen?</div>
    <div class="button_box">
        <h:commandButton styleClass="button_small_left" value="Ja" action="#{objectPM.delete(objectPM.object)}"/>
        <input type="Button" class="button_small_right" value="Nein" onclick="hideElements('remove_box')"/>
    </div>
</div>

Also wenn ich oben auf den Löschen-Button drück, wird die untere Box sichtbar... Wenn ich unten auf "Nein" drücke, sollte sie einfach wieder zu gehen. Genau das macht er... jedoch führt er danach gleich wieder die Anzeige-Funktion aus...also wahrscheinlich wird der Löschen-Button nochmal ausgeführt. Er bewegt sich auch mit, wenn ich den unteren Button klicke...

Die Funktionen folgen also so schnell hintereinander, dass man es einfach nicht mitbekommt, dass es zwischendurch zu war.

Also liegts nicht am JavaScript, sondern an der HTML-Struktur, aber des sind 2 getrennte DIV-Boxen, wobei es garkeinen Sinn ergibt, dass der Löschen-Button mit betätigt wird... im IE funktioniert es ja auch wie es soll.

Wie ich das lösen kann, weiß ich leider nicht.

 

[faetzminator]

jedoch führt er danach gleich wieder die Anzeige-Funktion aus...

Wie kommst du zu dieser gewagten Aussage?

 

[Evil-Devil]

Gibt es in dem finalen Sourcecode vielleicht zwei Elemente mit ein und derselben ID und was sagt Firebug? Kann man die Site sonst irgendwo einsehen?

 

[Smoothi]

@faetzminator
Ich hab mit Firebug getestet und Haltepunkte in beiden Funktionen gesetzt. Zunächst hält er in der Funktion, in der er sollte (also die zum Ausblenden) und dann nochmal in der anderen (also die zum Einblenden). In dem Button selbst, wird nur die Ausblendefunktion aufgerufen. Paar Zeilen darüber ist ein Button, der die Sache einblendet. (siehe dritter Post)

@Evil-Devil
Es gibt nur einmal meine remove_box. Diese hat nur den gleichen Klassen- wie ID-Namen..das sollte ja kein Problem sein.
Die arguments-Variable wird schon ordnungsgemäß gefüllt.

Wie gesagt, anhand der Haltemarken seh ich auch, dass die Funktion richtig ausgeführt wird. Problem ist nur, dass die showElements-Funktion direkt nach der hideElements-Funktion ausgeführt wird. Die beiden Funktionen unterscheiden sich nur durch die Zeile:

document.getElementById(elementName).style.display='none';

Bei hide steht da "none", bei show "block".

Wenn ich den Button "löschen" klicke, öffnet sich ordnungsgemäß die Bestätigungsbox. Wenn ich nun "nein" drücke, dann wird anscheinend der löschen-Button erneut geklickt, sodass die hide-Methode zwar ausgeführt wird, aber unmittelbar danach wieder die show-Methode, sodass man es einfach nicht sieht und den Anschein erweckt, dass die Box garnicht erst verschwindet. Wenn ich den "Nein"-Button drücke, wird der "Löschen"-Button ebenfalls mit betätigt... ich seh, dass da sich beim Firefox beim Buttonklick ja der enthaltene Text etwas verscheibt. Im Internetexplorer ist das nicht der Fall... Die beiden Elemente sind ja auch nicht untergeordnet, sonder sollte unabhängig voneinander sein.

EDIT: den Source darf ich leider nicht veröffentlichen...

 

[faetzminator]

Und du bist sicher, dass diese Funktion zum einblenden nur vom Button aufgerufen wird?

 

[Evil-Devil]

Wenn ich den Button "löschen" klicke, öffnet sich ordnungsgemäß die Bestätigungsbox. Wenn ich nun "nein" drücke, dann wird anscheinend der löschen-Button erneut geklickt, sodass die hide-Methode zwar ausgeführt wird, aber unmittelbar danach wieder die show-Methode, sodass man es einfach nicht sieht und den Anschein erweckt, dass die Box garnicht erst verschwindet. Wenn ich den "Nein"-Button drücke, wird der "Löschen"-Button ebenfalls mit betätigt... ich seh, dass da sich beim Firefox beim Buttonklick ja der enthaltene Text etwas verscheibt. Im Internetexplorer ist das nicht der Fall... Die beiden Elemente sind ja auch nicht untergeordnet, sonder sollte unabhängig voneinander sein.

Die beiden Knöpfe liegen nicht zufällig übereinander? Hatte das mal in einem Projekt das die Klicks durchgereicht wurden. Was ist wenn du die Funktion über die Konsole mit ihren Parametern aufrufst? Dann sollte ja an sich die Logik richtig feuern. (Firebug Konsole)

 

[Smoothi]

Lösung: Ich habe aus dem h😱utputLabel h:form gemacht, so funktioniert es 😉

 

[Smoothi]

Form brachte einen neuen Fehler XD

Ein Button der sich untendrunter befand funktionierte nicht mehr...

h😱utputFormat klappt aber