Code Styling Project

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

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

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

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.

Categories: English, jQuery at WordPress
: Comments rss

One response Leave a comment

Sroddy

23.06.2009 | 05:35

Hi, just my two cents, I used this solution to collapse rows

Javascript
1
2
3
4
5
$('#subcribed_matches tbody tr.date_group').click(function() {
	$(this).siblings().toggle();
	$(this).children('th').toggleClass("expand_group");
	return false;
});
timing: 0.006s

Javascript
1 2 3 4 5	$('#subcribed_matches tbody tr.date_group').click(function() { $(this).siblings().toggle(); $(this).children('th').toggleClass("expand_group"); return false; });
timing: 0.006s

To get around the Explorer 8 bug i’ve created a “hidden” class in my css with just:

CSS
1
2
3
.hidden {
display:none; 
}
timing: 0.016s

CSS
1 2 3	.hidden { display:none; }
timing: 0.016s

and then used these lines of code instead of the previous ones:

Javascript
1
2
3
4
5
$('#subcribed_matches tbody tr.date_group').click(function() {
   $(this).siblings().toggleClass("hidden");
   $(this).children('th').toggleClass("expand_group");
   return false;
});
timing: 0.006s

Javascript
1 2 3 4 5	$('#subcribed_matches tbody tr.date_group').click(function() { $(this).siblings().toggleClass("hidden"); $(this).children('th').toggleClass("expand_group"); return false; });
timing: 0.006s