I'm wrestling with a ridiculous problem in IE6. I render a page full of data on the server-side, and then iterate through the results (rows of an HTML table) on the client side, updating each row in sequence with the results of an AJAX call on each row. (I don't want to use .each(), don't ask...)
IE6 will not show anything on the client side until all of the code in the document.ready() block completes. In the code below you'll see it's reproducible without the AJAX db calls: take a table of 100 rows, and when the document is ready, iterate through the TR collection and replace the text node in each TD. IE6 won't show a thing until the jQuery code is finished executing.
Here's the test case:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<head>
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
var totalRows = $('table tr').size();
for (var i=0; i<totalRows; i++) {
var currentRow=$('table tr').eq(i);
var cellTarget = currentRow.children(0);
cellTarget.html('and after');
}
});
</script>
</head>
<body>
<table>
<tr><td>before</td></tr>
<tr><td>before</td></tr>
<tr><td>before</td></tr>
... repeat 97 more times ...
</table>
</body>
</html>
Here's the nutty part: put an alert ('hello'); after updating the TD text node and as the modal alert box pops up you can watch the rendered table underneath updating as it iterates through the row. I've tried using various sleep functions after the text node update to no avail -- it doesn't seem to have an effect other than slowing down the overall execution time. I've tried moving the script blocks to the end of the file and that doesn't seem to fix the issue either.
Any ideas?