problem refreshing div containing php code using jquery

Question

I have read 3 posts on SO about how to do this, but its not working for some reason.

On the page index.php, i have this script:

<script type="text/javascript">

function update() {
  $.get("index.php", function(data) {
    $("#uploadcount").html(data);
    window.setTimeout(update, 5000);
  });
}

</script>

and then this div, also in index.php

<div id=uploadcount>
<?
$result = mysql_query("SELECT * FROM mydb");
$num_rows = mysql_num_rows($result);
echo "<h1>$num_rows</h1><h2>rows</h2>";
?>
</div>

The php is displaying the row count fine, but it wont refresh the number.
(i have latest jquery build included in head of index.php)

Answer 1

Try enclosing your div ID in double quotes:

<div id="uploadcount">

Also, put your jQuery within a document.ready block, and the call to setTimeout should not be inside the $.get method:

<script type="text/javascript">
$(document).ready(function() {
    function update() {
      $.get("index.php", function(data) {
        $("#uploadcount").html(data);
      });
    }
    window.setTimeout(update, 5000);
});
</script>

If you want to selectively retrieve something from a document, you can use $.load with a selector, e.g.:

$("#uploadcount").load("index.php #uploadcount");

http://docs.jquery.com/Ajax/load

That only works with jQuery 1.2 and above.

Answer 2

Try using this for your update function

function update() {
 $("#uploadcount").load("index.php #uploadcount")
 window.setTimeout(update, 5000);
}

Answer 3

found a solution that works great

<script type="text/javascript">
$(document).ready(function() {
setInterval(function()
{
     $('#uploadcount').fadeOut("fast").load('uploadcount.php').fadeIn("slow");
}, 10000);

});
</script>


<div id="uploadcount">
<? include("uploadcount.php");?>
</div>

Thanks all to helped.