Code Styling Project

Ich wurde von einigen Nutzern informiert, das etwas nicht stimmt, wenn man jQuery 1.3.2 mit dem Microsoft Internet Explorer 8 im Normalmodus (nicht im Kompatibilitätsmodus) benutzt. Der Effekt ist erschreckend, denn einige Handler, die Teile der Webseite ein- bzw. ausblenden sollen, reagieren einfach nicht.
Wieder habe ich mich auf die Suche begeben, was dahinter stecken könnte und ob das schon bekannt ist. Ich habe wieder etwas dazu gefunden und zeige hier eine Umgehungslösung.

Als Einstieg in die Problematik möchte ich erst einmal den HTML Markup und den dazu gehörigen jQuery Code zeigen, der Teile des Markups ein- und ausblenden soll.

HTML Markup

1
2
3
4
5
6
7
8
9
10

<a id="rowtoggler" href="#rowtoggler">Toggle rows</a>
<table>
  <tr><td>First row (always visible)</td></tr>
  <tr class="rowtoggler" style="display:none">
    <td>Second row (hidden initially, can be toggled)</td>
  </tr>
  <tr class="rowtoggler" style="display:none">
    <td>Third row (hidden initially, can be toggled)</td>
  </tr>
</table>

jQuery Code

1
2
3
4
5
6

jQuery(document).ready( function($) {
  $('#rowtoggler').click(function() {
     $('.'+$(this).attr('id')).toggle();
     return false;
  });
});

Was passiert nun, wenn man den Link anklickt? Die Tabellenzeilen sollen basierend auf ihrem derzeitigen Zustand angezeigt bzw. versteckt werden. Aber im IE 8 passiert schlicht gar nichts.
Aber welchen Grund gibt es dafür, insbesondere weil der IE8 im Kompatibilitätsmodus (wenn er einen IE 7 simuliert) damit keine Probleme zu haben scheint.

Ich fand schließlich im jQuery Bug Trac folgenden Eintrag: $().toggle() does not work with <tr> in IE 8 und habe daraufhin meine eigene Untersuchung gestartet, basierend auf dieser Meldung.

Ergebnisse der Untersuchung

Ich begann zuerst mit sehr einfachen Tests und habe mir den Sichtbarkeits-Status der Elemente selbst ausgeben lassen mit alert($(elem).is(’:visible’)) und ebenso mit alert($(elem).is(’:hidden’)). Ich war schockiert, also der IE 8 die Zeilen, die per inline style auf display:none gestellt waren, als sichtbar gemeldet hat! Es scheint auch so, daß die normale toggle() Methode diesen Test so macht und deswegen nichts zu passieren scheint. Folgendes kann man also zusammenfassen:

1. Methode .is(’:visible’) arbeitet nicht wie erwartet
2. Methode .is(’:hidden’) arbeitet nicht wie erwartet
3. Methode .toggle() arbeitet nicht wie erwartet (scheint mit den o.g. Methoden zusammen zu hängen)

Ausgehend von diesem schlechten Verhalten des IE 8 habe ich einen Ersatz entwickelt, der bisher funktionierende Browser nicht beeinträchtigt aber den IE 8 dazu befähigt, das auch zu können.

jQuery Ersatzlösung für alle Browser

Dieser Ersatz funktioniert weiterhin in allen Browsern wie bisher nur das nun auch der IE 8 mitspielt und mit der toggle() Methode was anfangen kann. Ich habe für die beiden Methoden is(’:visible’) und is(’:hidden’) keine separate Lösung hier gezeigt, aus dem Nachfolgenden kann man sich die aber leicht selbst ableiten.

1
2
3
4
5
6
7
8

jQuery(document).ready( function($) {
  $('#rowtoggler').click(function() {
     $('.'+$(this).attr('id')).each(function(i, elem) {
	$(elem).toggle($(elem).css('display') == 'none');
     });
     return false;
  });
});

Ich hoffe, daß dies vom jQuery Team schnellst möglich gefixet wird. Ich befürchte aber auch, das Projekte wie WordPress nicht so schnell updaten werden, wenn jQuery eine bereinigte Version verfügbar hat. Deshalb ist es derzeit der einzige Weg, solche Probleme zu umgehen, indem man mehr Code schreibt als nötig ist.

Ergänzung: Mir ist bewusst, das es nicht nur ein jQuery Problem ist, sondern auch Microsoft eine gehörige Aktie an diesem Problem trägt. Nur leider ist es im IE 8 nun mal passiert und das Script-Framework muss es Wohl oder Übel abfangen. Denn man kann immer mal wieder auf einen Browser treffen, der im aktuellen IE 8 Zustand ist. Dort sollte es aber trotzdem funktionieren.