using ajax to fetch a result from php and reload page

Question

So I have been working on this for hours now, I have read a bunch of StackOverflow posts and I am still having no luck.

I have a page that has 2 sections to it, depending on the int in the database will depend on which section is being displayed at which time.

My goal is to have the page look to see if the database status has changed from the current one and if it has then refresh the page, if not then do nothing but re-run every 10 seconds.

I run PHP at the top of my page that gets the int from the database

 $online_status = Online_status::find_by_id(1);

I then use HTML to load the status into something that jquery can access

 <input type="hidden" id="statusID" value="<?php echo $online_status->status; ?>">
<span id="result"></span>

So at the bottom of my page, I added some jquery and ajax

   $(document).ready(function(){
     $(function liveCheck(){
       var search = $('#statusID').val();
       $.ajax({
         url:'check_live.php',
         data:{search:search},
         type:'POST',
         success:function(data){
           if(!data.error){
             $newResult = $('#result').html(data);
             window.setInterval(function(){
               liveCheck();
              }, 10000); 
           }
        }
     });
   });
 liveCheck();
 });

this then goes to another PHP page that runs the following code

 if(isset($_POST['search'])){
    $current_status = $_POST['search'];
    $online_status = Online_status::find_by_id(1);
    if($current_status != $online_status->status){
       echo "<script>location.reload()&semi;</script>";
    }else{
    }
  }

the jquery then loads into the HTML section with the id of "result" as shown earlier. I know this is a very bad way to do this, and as a result, it will work at the beginning but the longer you leave it on the page the slower the page gets, till it just freezes.

If anyone is able to point me towards a proper method I would be very grateful. Thank you!!

Answer 1

js:

(function(){
    function liveCheck(){
        var search = $('#statusID').val();
        $.ajax({
            url:'check_live.php',
            data:{search:search},
            type:'POST',
            success:function(data){
            if(data.trim() == ''){
                location.reload();
            }else{
                $('#result').html(data);
                window.setTimeout(function(){
                    liveCheck();
                }, 10000); 
            }
            }
        });
    }

    $(function(){
        liveCheck();
    });
})(jQuery)

php:

<?php
if(isset($_POST['search'])){
    $current_status = $_POST['search'];
    $online_status = Online_status::find_by_id(1);
    if($current_status != $online_status->status){
    $data = '';
    }else{
        $data = 'some html';
    }
    echo $data;
}

Answer 2

Your page is slowing down because you are creating a new interval every time you call the liveCheck function. Over time, you have many intervals running and sending requests to your PHP file concurrently. You can verify this behavior by opening the developer console in your browser and monitoring the Network tab.

What you should do instead is set the interval once, and perform the $.ajax call inside that interval. Additionally, it's good practice to not send a new request if a current request is pending, by implementing a boolean state variable that is true while an request is pending and false when that request completes.

It looks like the intended behavior of your function is to just reload the page when the $online_status->status changes, is that correct? If so, change your PHP to just echo true or 1 (anything really) and rewrite your JS as:

function liveCheck() {
    if (liveCheckPending == true)
        return;
    liveCheckPending = true;
    var search = $('#statusID').val();
    $.ajax({
         url:'check_live.php',
         data:{search:search},
         type:'POST'
     }).done(function(data){
         if (!data.error)
            location.reload();
     }).always(function(data){
         liveCheckPending = false;
     });
}

var liveCheckPending = false;
setInterval(liveCheck, 10000);