Question

I want my page to check if a PHP file returns ‘true’ every few seconds, and refresh a certain div if the PHP file has returned ‘true’. Currently I have this, which isn’t working and is for the complete page instead of the div (I’d like the div to refresh only instead of the complete page):

<script type="text/javascript">
$(document).ready(function(){
    setInterval("checkTime()", 10000);
    function checkTime(){
        $.ajax({
            url: 'checktime.php',
            success: function(refresh){
                if(refresh == "true"){
                    location.reload(true);
                }   
            }
        });
    }

});
</script>

EDIT:

Following the instructions given here I placed the following code in my header:

  $(document).ready(function(){        
    function checkTime(){
        $.ajax({
            dataType: 'json',
            url: 'checktime.php',
            success: function(data){
                if(data.refresh == "true"){
                    $('#tv').load('tv.php');
                }   
            }
        });
    }
    setInterval(function() {checkTime()}, 10000);
});

My TV div looks like this:

<div id="tv">
<? include 'tv.php' ?>
</div>

When I manually go to checktime.php and refresh my index, the tv div is updated properly at the correct time. However nothing seems to happen from the javascript in the header.

Answer 1

You will need a url to send the div html when it needs the refresh. Following will load contsent from that url into the div you specify. I added a trim to the refresh text in case server sends and extraneous spaces or line breaks

Uses jQuery AJAX shortcut method load()

http://api.jquery.com/load/

$(document).ready(function(){
    setInterval("checkTime()", 10000);
    function checkTime(){
        $.ajax({
            url: 'checktime.php',
            success: function(refresh){
                if($.trim(refresh) == "true"){
                    $('#myDivID').load(refreshDivUrl)
                }   
            }
        });
    }

});

EDIT: there is actually a simpler logic for this. Send back “false” for no refresh, otherwise send back the html and save an extra call to get the new html

$(document).ready(function(){
    setInterval("checkTime()", 10000);
    function checkTime(){
        $.ajax({
            url: 'checktime.php',
            success: function(refresh){
                if($.trim(refresh) != "false"){
                    $('#myDivID').html(refresh)
                }   
            }
        });
    }

});