Question

I have this Javascript code between head tags

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> 
<script> 
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 1000);
</script>

And div looks like this :

<div id="loaddiv"> 

<div style="float: left; width:868px; height:635px; border:2px solid #000; overflow:auto;">
 <?php 
 index_table();
 ?>
</div>

</div>

index_table(); is a function that outputs records from a table in MySQL database. Each time a new record is inserted to this table, it is supposed to automatically show up because my div currently keeps refreshing (or it keeps constantly blinking but New record is not there).

The problem is that it doesn’t show the new records that are being inserted. The only way to do it is by simply refreshing the page ( Refresh Button – Google Chrome ).

What’s wrong with the code above?

Answer 1

Have you tried setting an alert on the callback function for .load like:

$('#loaddiv').load('reload.php', function() {
  alert('Load was performed.');
});

To make sure that reload.php is loading correctly?