jquery dialog table causes ie to lockup

I am working on an internal website that uses jquery's dialog box. When I open the dialog box, it uses an ajax-loader.gif while the application is getting data from the server.

This works fine and dandy in FF, of course IE is struggling. Here is the code...

$("#inputDiv5").html('<div style="font-size:100%;height:300px;overflow-y:scroll;"><div id="inputDiv6"><center><img src="/tps/images/ajax-loader.gif" alt="Loading..." /></center></div></div>').dialog({
                title: 'Databanks for ' + $("#PidTitle" + count).text(),
                width: 500,
                modal: true,
         开发者_运维问答       resizable: false,
                open: function() {
                    $.get('content_backend_pub_pid_2_5.ashx', { cmd: 11, pid: x }, function(o) {
                        $("#inputDiv6").html(o);
                        $(".sortablethree th").addClass("sort_header");
                        $(".sortablethree").tablesorter({ widgets: ["zebra"] });
                        $(".sortablethree tr").hover(function() { $(this).addClass("over"); }, function() { $(this).removeClass("over"); });
                    });
                },
                buttons: {
                    'Close': function() { $(this).dialog('close'); }
                }
            });

It probably is not the best written code since this is my first time using jquery, so don't make fun! Lol! ;-)

The issue is in IE the animation displays, but does not spin. FF it spins while the data is being loaded.

I did run some tests. I commented out the code within the success function of the get and the animation works. So it looks like it is slowing down when I declare the table a tablesorter. This table does return about 1000 rows.

I added the animation to a lone paragraph in the DOM and that animation stops working too.

Also, I had task manager opened up when I open the dialog box and there is a large spike in CPU usage.

Any thoughts?

Given the well-known slowness/inefficiency of the IE JavaScript engine, I would hazard a guess that IE simply can't handle that much information. Since you do mention that you have ~1000 rows, one solution might be to do some kind of pagination, to reduce the amount of information that has to be processed at once.

Additional suggestions: You could replace your .mouseover() and .mouseout() bindings with a single .hover() binding, like so: (see .hover() doc: http://api.jquery.com/hover/)

$(".sortablethree tr").hover(function() { $(this).addClass("over"); }, function() { $(this).removeClass("over"); });

That'll save both you and jQuery an extra selection.

Additionally, you are missing a semi-colon at the end of your $.get(). I don't think that one is strictly required, but IE has been known to choke on similar things.