Question

I have a table td class named “on” that I would like to fade in when Ajax refreshes the table.
For some reason it wont fade in.

Here is the code so far:

function Ajax()
{
var xmlHttp;
xmlHttp.onreadystatechange=function(){
document.getElementById('refreshtable').innerHTML=xmlHttp.responseText;
setTimeout('Ajax()',20000);
xmlHttp.open("GET","mypage.cfm",true);
xmlHttp.send(null); 
}
window.onload=function(){
setTimeout('Ajax()',20000);
$(".on").hide().html(html).fadeIn(); //jquery fadein
}

<table>
<div id="refreshtable">
<tr>
<td class="on">#data1#</td>
<td class="on">#data2#</td>
<td class="on">#data3#</td>
</tr>
</div>
</table>

Answer 1

Why not use jQuery’s implementation of AJAX? It will shrink your code quite a bit.

$(function () {
    var timer = setInterval(function () {
        $.get('mypage.cfm', function (response) {
            $('.on').fadeOut(function () {
                $(this).html(response).fadeIn();
            });
        });
    }, 20000);
});

Here is a demonstration of this functioning properly: http://apexeleven.com/stackoverflow/jquery.get/test.html