Refreshing Div Contents not working?

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

The php code is executed on server side, and the fadeOut/fadeIn on client. You should do it either by using ajax or by inserting a window.load() within setInterval for refreshing the page.

Answer 2

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?

Answer 3

I would suggest using jQuery's .get and .html method to refresh the data. .get retrieves the resultset and .html to display the resultset.

http://api.jquery.com/html/