Refresh DIV Content Without Reloading Page

Please excuse and completely ignore my comments above, I rushed to post a question here without really thinking things through.

After doing more research, I’ve found what I believe is a better way to accomplish this task, but I can’t get it working.

I’m trying to auto-refresh the content inside a div tag using jQuery, and even found two great tutorials (can’t post the links, search for “jquery refresh div”, I read both brightcherry and 9lessons).

Looks straight forward enough, even for me. So I open the original code, which looks like:


<table cellpadding="0" cellspacing="2">
<tr>
<th>rank</th>
<th>website</th>
<th>traffic</th>
<th>change</th>
</tr>
<div id="data">
<?php echo getList($currentpage, $highlight); ?>
</div>
</table>

And modify as outlined in the lessons, moving

<?php echo getList($currentpage, $highlight); ?>

to an external file named data.php and calling it in the js to be refreshed every 10 seconds:


<script src="jquery.min.js"></script>

<script>
var auto_refresh = setInterval(
function()
{
$('#data').fadeOut('slow').load('data.php').fadeIn("slow");
}, 10000);
</script>
...........
<table cellpadding="0" cellspacing="2">
<tr>
<th>rank</th>
<th>website</th>
<th>traffic</th>
<th>change</th>
</tr>
<div id="data">
</div>
</table>

And it doesn’t work. At all. The PHP file doesn’t load and white space is displayed where the data should be. I’m at a loss here and think I’m just not seeing something, please help…