Select-Boxen als Dropdown in Facebook lassen unter dem IE8 nichts auswählen

ric — Sun, 20 Sep 2009 17:03:01 +0000

Habe mich in den letzten Tagen mit einem Problem herumschlagen müssen, welches nur im Internet Explorer 8 auftritt – und auch nur in FBML-Boxen in Facebook-Pages (früher hiessen die glaub ich noch Fanpages).
Mein Auftrag war es, ein einfaches Formular auf der Facebook-Page eines Kunden einzubauen. Man sollte Destinationen auswählen und ein Datum festlegen können. Kein sonderlich schweres Problem, dachte ich! Habe das Formular eingebaut, getestet, alles wunderbar!
Der Kunde war aber leider gar nicht zufrieden damit, weil er (wenn nicht auf Facebook eingelogt) die Destinationen, welche ich in einer einzeiligen Selectbox zum Auswählen per Dropdown eingebaut hatte, einfach nicht anwählen konnte – die Dropdown-Liste schloss sich sofort, wenn man mit der Maus drüberfuhr.
Dieses Problem konnte ich aber beim besten Willen nicht nachvollziehen. Nach einem Test mit allen mir zur Verfügung stehenden Browsern konnte ich das Problem immer noch nicht reproduzieren, obwohl die Liste der getesteten Browser nicht gerade klein war:

Internet Explorer 6.0 (Win XP)
Internet Explorer 7.0 (Vista)
Firefox 3.5.3 (Win XP)
Firefox 3.0.14 (Debian/Iceweasel)
Apple Safari 4.0 (Win XP)
Opera 9.64 (WinXP und Debian)
Google Chrome 2.0 (Win XP)
Konqueror 4.3.1 (Debian)

In keinem dieser aufgelisteten Browser gab es ein derartiges Problem! Der einzige Browser, der im Ansatz Schwierigkeiten gemacht hatte, war der Internet Explorer 6.0 – aber nur, weil er die Facebook-Seiten erst gar nicht anzeigen wollte und dann komplett abgestürzt war. Nach dem dritten Versuch hatte er dann die Seite und das Formular ohne zu Mucken dargestellt – und eine Auswahl der Destination zugelassen.

Als ich erfuhr, dass der Kunde den Internet Explorer 8 verwendete, war ich erstmal ratlos, denn ich hatte gerade keinen zur Hand und ich konnte mir beim besten Willen nicht vorstellen, warum eine simple Select-Box ein Problem darstellen sollte. Nach einem Telefonat mit einem Freund, der ein System mit Internet Explorer 8 hatte, wurde mir der Fehler bestätigt. Leider hat das aber nicht erklärt, warum dieser Browser sich so verhielt – vor allem machte mich stutzig, dass die Vorgänger-Versionen ja nicht derartige Probleme aufwiesen.

Mir blieb also nichts anderes übrig, als ein eigenes System mit Internet Explorer 8 zum Experimentieren aufzusetzen. Zum Glück hatte ich noch eine Vista64-Lizenz rumfliegen. Nach etlichen Stunden der Installation und Updates und Probleme mit einer zu kleinen Systempartitionen (30 GB reichen für ein leeres Vista64 nicht aus, wenn man alle Updates inkl. SP1 haben will!), konnte ich endlich rumexperimentieren.

Die Lösung:
Ich kann zwar immer noch nicht erklären, warum sich der IE8 in diesem Fall so merkwürdig verhält, aber ich habe ein Workaround gefunden. Und zwar stellte sich heraus, dass immer nur die erste Select-Box betroffen war. Nachfolgende Dropdowns funktionierten einwandfrei. Mein Workaround: Banal und unschön, aber es funktioniert. Man baue vor der ersten Select-Box eine Dummy-Select-Box ein, die per Style unsichtbar gemacht wird (“display:none”) und siehe da, das Formular funktioniert so, wie erwartet – und der Benutzer kriegt davon normalerweise gar nichts mit.

onClick oder onChange?

ric — Wed, 30 Apr 2008 10:55:58 +0000

Gerade bin ich über ein JScript-Problem gestolpert, bei dem ich ein wenig nachdenken musste (zur Abwechslung *g*).
Die Ausgangssituation: ich hatte zwei Radio-Buttons, die typischerweise zur selben Gruppe gehören, weshalb nur einer von beiden Buttons zur selben Zeit ausgewählt sein kann. Ich wollte für den Fall, dass einer der Buttons angeklickt wird, weitere Formularfelder einblenden (damit der Benutzer nicht von vornherein von der Menge der Eingabefelder überwältigt ist…oderso). Intuitiv habe ich daher gleich zum Event onChange gegriffen, schliesslich sollte das Script nur aktiv werden, sobald sich der Zustand ändert. Das schien auf den ersten Blick auch wunderbar zu funktionieren. Ich teste ja parallel alles sofort auf dem Firefox. Als ich aber kurz im IE6 geschaut habe, ob das Layout noch passt musste ich feststellen, dass das überhaupt nicht funktioniert. Lustigerweise war beim MS-Browser die Funktionalität meines kleinen Scriptes sogar genau umgekehrt als vorgesehen – und das obwohl ich klar nach dem checked-Zustand abgefragt hatte.
Jedenfalls musste ich dann auf onClick ausweichen, was ich ja eigentlich nicht nehmen wollte, weil man nicht unbedingt das Formular mit der Maus bedienen muss. Ausserdem hatte ich noch zwei Labels zu den jeweiligen Radio-Buttons definiert, die natürlich auch anklickbar wären, wofür ich aber zusätzlich auch deren onClick-Ereignisse hätte abfangen müssen…dachte ich zumindest.

Es ist aber ganz anders als ich es mir gedacht hatte: onChange funktionierte für meine zwecke überhaupt nicht unter dem IE6, wogegen onClick genau die komplette Funktionalität lieferte, die ich wollte: selbst wenn ein Radio-Button per Space-Taste ausgewählt wird, wird onClick ausgelöst. Genauso verhält es sich mit den Labels, die mit den jeweiligen Radio-Buttons direkt verbunden sind und daher auch das onClick-Ereignis des zugehörigen Buttons auslösen, also nicht nur den blossen Zustand des Buttons mit beeinflussen.

Das Problem ist jetzt gelöst, aber ich bin gerade etwas unschlüssig, ob ich die Logik hinterfragen muss, mit der ich an die Auswahl des Events herangegangen bin, oder ob der IE6 an dieser Stelle einfach falsch reagiert…

Ric's Blog » form

Select-Boxen als Dropdown in Facebook lassen unter dem IE8 nichts auswählen

onClick oder onChange?