jQuery 1.3.2 causes problems at IE 8
codestyling | 20. June 2009 | 21:08
I have noticed after a lot reports from different users, that something went wrong while using jQuery 1.3.2 and Microsoft Internet Explorer 8 in normal v8 mode (not compatible mode). The effect of this bug is very annoying, all your handler using methods to show and hide portions of you webpage won’t do anything or if they are interacting, than they are not doing what you want.
Again i did a deep investigation what is the reason for and also checked, if this is known currently. I found it and will show a workaround here.
First of all to describe the type of issue more precisely i will illustrate the HTML code and also the related jQuery code that will be connected to show/hide some portion of the markup.
HTML Markup
| HTML | |
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> |
| timing: 0.014s | |
jQuery Code
| Javascript | |
1 2 3 4 5 6 | jQuery(document).ready( function($) { $('#rowtoggler').click(function() { $('.'+$(this).attr('id')).toggle(); return false; }); }); |
| timing: 0.006s | |
What happens if you click the anchor normally? The table rows will be shown or hidden based on their current status. But at IE8 this doesn’t happen, simply nothing happens.
But what is reason therefore, because the same markup and code works well in IE8 if the page will be shown in compatibility mode which simulates IE7.
I found at the jQuery Trac the following IE8 related bug entry: $().toggle() does not work with <tr> in IE 8 and did my own investigation based on that report.
Results of Investigation
I started to check what happens if i test the element itself using alert($(elem).is(’:visible’)) and also alert($(elem).is(’:hidden’)). I was shocked about the alert, that all rows with inline style set to display:none will be reported as visible! It seems, that also the pure toggle() method makes this test and that’s why nothing happens. Following results are the outcome:
- method .is(’:visible’) doesn’t work as expected
- method .is(’:hidden’) doesn’t work as expected
- method .toggle() doesn’t work as expected (may be the result of above named method failure)
Now based on this bad behavoir of IE 8 a suitable workaround has to be taken instead, that ensures the prior proper working browser and also make IE 8 working as expected.
jQuery Workaround for all Browser
The workaround keeps the correct function for all prior unaffected browser but also ensures the proper working of IE8 in relation to the toggle() function. I have not yet created workaround for is(’:visible’) or is(’:hidden’) but i think, this could be easly done according to the show solution.
| PHP | |
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; }); }); |
| timing: 0.067s | |
I hope, that this will be fixed as soon as possible. But i’m also afraid, that projects like WordPress won’t update as fast as possible their bundled jQuery scripts. So the only way to get arround this issue(s) is to write more code as needed to get the same results.






Sroddy
23.06.2009 | 05:35Hi, just my two cents, I used this solution to collapse rows
To get around the Explorer 8 bug i’ve created a “hidden” class in my css with just:
and then used these lines of code instead of the previous ones:
hope this helps
reply »