Updating content of a div using jquery

Question

I have this code

    <script>
    function update() {
      $.get("note.php?load=true", function(data) {
        $("#note").html(data);
        window.setTimeout(update, 3000);
      });
    }
    </script>
    <div id="note"><?php
include("note.php?load=true");
?></div>

Where "note.php?load=true" is the URL where I have a content which I'd like to display in div "#note" updating it every 3 seconds. When I load that code, I can see the content of note.php?load=true because I've included it via php to show it immediately on page load, but it just doesn't update. Anyone could tell me why?

Answer 1

It won't update until the update function is called. Try putting window.setTimeout(update, 3000); somewhere with a more global scope so that your update function actually gets called.

Answer 2

You're never calling update() in the first place.

Answer 3

Just to clarify, are you looking to have the note loaded when the page loads via JS only, or loaded via PHP, and then updated regularly via JS?

If it's the latter, try this out:

<script>
    var updateId = setInterval(function() {
        $.get('note.php?load=true', function(data) {
            $('#note').html(data);
        });
    }, 3000);
</script>
<div id="note">
    <?php include("note.php?load=true");?>
</div>

That way, you have the note loaded initially, when the page is sent to the client. After that, the setInterval function will trigger once every 3 seconds (3000 milliseconds) and refresh the content of your div.