jquery is not working with IE 8

Question

Hi,

i am trying to implement toggle function with a table row. Everything is going fine except in IE8. The script which i was used is given below.

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">  
    $(document).ready(function(){
        $("#report tr:odd").addClass("odd");
        $("#report tr:not(.odd)").hide();
        $("#report tr:first-child").show();

        $("#report tr.odd").click(function(){
            $(this).next("tr").each(function (){ this.toggle()});
            $(this).find(".arrow").toggleClass("up");
        });
        //$("#report").jExpand();
    });
</script>        

somebody please help me..

Jessica

Answer 1

You need to wrap ($()) your this (which is just a DOM element inside that loop, not a jQuery object) to have access to .toggle(), like this:

$(this).toggle()

But there's no need for the .each() loop here, this:

$(this).next("tr").each(function (){ $(this).toggle()});

can just be this:

$(this).next("tr").toggle();

And it'll operate on all of the elements found...even though there will be only one here.

---

Issue #2 is the fact that IE8 specifically thinks the next row is always visibile (this is a bug in the jQuery 1.3.2 implementation you're using). You have 2 options here, the quick fix is to re-write it like this:

$("#report tr.odd").click(function(){
    var show = $(this).find(".arrow").toggleClass("up").hasClass("up");
    $(this).next("tr").toggle(show);
});

You can see that working here. Or a better solution to me, upgrade to the latest jQuery (1.4.3), you can test your current code here against it, working in IE8 as well.

Answer 2

In your line:

$(this).next("tr").each(function (){ this.toggle()});

Try changing it to:

$(this).next("tr").each(function (){ $(this).toggle()});

I've had this problem before on some browsers not being able to differentiate between this and $(this).

So you'll get:

$(document).ready(function(){
  $("#report tr:odd").addClass("odd");
  $("#report tr:not(.odd)").hide();
  $("#report tr:first-child").show();

  $("#report tr.odd").click(function(){
    $(this).next("tr").each(function (){ $(this).toggle()});
    $(this).find(".arrow").toggleClass("up");
  });
});