I have a table which has a list of transactions and am trying to do update the table contents at set intervals. I am running this page on a linux red hat server. It is just the AJAX that is not working right now.
<!doctype html>
<html>
<head>
<script>
function updateTrans() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.HTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("transactions").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "update_trans.txt", true);
xmlhttp.send();
}
window.setInterval(updateTrans(), 4000);
</script>
<link href="trans_styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 id="heading"> Chomp The Bit </h1>
<div id="transactions">
<table id="trans_tbl" border="0">
<tr>
<th colspan="2">Latest Transactions</th>
</tr>
<tr>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
<tr>
<td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
</tr>
<tr>
<td>ccccccccccccccccccccccccccccc</td>
<td>cccccccccccccccccccccccccccccc</td>
</tr>
<tr>
<td>ddddddddddddddddddddddddddddd</td>
<td>dddddddddddddddddddddddddddddd</td>
</tr>
<tr>
<td>eeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
<td>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
</tr>
<tr>
<td>fffffffffffffffffffffffffffff</td>
<td>ffffffffffffffffffffffffffffffff</td>
</tr>
<tr>
<td>ggggggggggggggggggggggggggggg</td>
<td>gggggggggggggggggggggggggggggggg</td>
</tr>
<tr>
<td>hhhhhhhhhhhhhhhhhhhhhhhhhhhhh</td>
<td>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</td>
</tr>
<tr>
<td>iiiiiiiiiiiiiiiiiiiiiiiiiiiiii</td>
<td>iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</td>
</tr>
<tr>
<td>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</td>
<td>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</td>
</tr>
</table>
</div>
</body>
</html>
Make sure to have, update_trans.txt file in the same directory, and it is not empty.
<head>
<script>
function updateTrans() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.HTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("transactions").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "update_trans.txt", true);
xmlhttp.send();
}
window.setInterval(updateTrans(), 4000);
</script>
<link href="trans_styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 id="heading"> Chomp The Bit </h1>
<div id="transactions">
</div>
</body>
</html>
I'm not sure whether this will fix the issue, but you should do window.setInterval(updateTrans, 4000) rather than window.setInterval(updateTrans(), 4000). That is, you should pass a reference to the function as the first argument to setInterval, rather than the return value of calling the function, which is what you're doing in your current code. In your current code, updateTrans will get called one time -- when you call it yourself -- but won't get called every 4000ms, as you seem to intend.
I'd also recommend that you use setTimeout instead of setInterval -- I wrote a post about this.