How can I refresh a external div being called from a php file with ajax?

Question

Lets say I have 2 files, index.php and get_data.php.. In get_data I have a sql while loop outputting data from my DB say username, image and a age in seconds/timer of the image since upload. In index I would like to make a call to get_feed to display the output from the while loop. I would like to only refresh the timer div called #timer not the rest of the data.. How can I accomplish this? Right now I can only refresh all of the content that I am outputting to #response in the index.php which has images so it refreshes the images which could be a lot of images which will kill the performance..

index.php -

<div id="response"></div>

repeatAjax();
function repeatAjax(){
  $.ajax({    
    type: "GET",
    url: "get_feed.php",             
    dataType: "html",                 
    success: function(response){                    
        $("#response").html(response); 
    },
        complete: function() {
           setTimeout(repeatAjax,1000);
       }

    });
};

get_feed.php -

$today_date = date('Y-m-d H:i:s');
$sql = "SELECT image, user, date FROM images";
$result = $conn->query($sql);

if ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {
   $image = $row['image'];
   $user = $row['user'];
   $date = $row['date'];

   $timeFirst  = strtotime($today_date);
   $timeSecond = strtotime($date);
   $timeSecond = $timeSecond + 86400;
   $timer = $timeSecond - $timeFirst;

   echo '<div id="timer">'.$timer.'</div>';
   echo '<div id="user">'.$user.'</div>';
   echo '<img src="'.$image.'" id="image"';
}
} else {
echo "0 results";
}

There might be errors in the above script I just wrote it for this example but what I am going for is just refreshing the timer every second without refreshing the image or username. Also I am worried about crashing my site if the server cannot handle the load of the refreshing every second say if there were a lot of people on the site..

Thanks!

Answer 1

to avoid the duplicate you shouldn't get all the data from the query, instead you should use where clause for date because you use 'Y-m-d H:i:s' format for the date and in the js just append the div

in get_feed.php :

if(!empty($alreadyAccess)){
  $today_date = date('Y-m-d H:i:s');
  $sql = "SELECT image, user, date FROM images";
}
else{
  $sql = "SELECT image, user, date FROM images where date '$last_access_date'";
}

in index.php do change the .html to .append :

$("#response").append(response);

Answer 2

I think this will help.

Try replacing

 success: function(response){                    
        $("#response").html(response); 
    },

with

success: function(response, status) {
        $("#response").html(response); 
    },

in you index.php

Your modified get_feed.php in order top provide two different html response

 $timer=$_GET['tm'];
    $today_date = date('Y-m-d H:i:s');
    $sql = "SELECT image, user, date FROM images";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {

    while($row = $result->fetch_assoc()) {
       $image = $row['image'];
       $user = $row['user'];
       $date = $row['date'];

       $timeFirst  = strtotime($today_date);
       $timeSecond = strtotime($date);
       $timeSecond = $timeSecond + 86400;
       $timer = $timeSecond - $timeFirst;

       if($timer)
      {
      echo '<div id="timer">'.$timer.'</div>';
     }
     else
    {     
       echo '<div id="user">'.$user.'</div>';
       echo '<img src="'.$image.'" id="image"';
    }

    }
    } else {
    echo "0 results";
    }

Your modified index.php to deal with two different html response

<div id="response_wrapper">
<div id="timer_response"></div>
<div id="remaining_response"></div>
</div>

repeatAjax();
function repeatAjax(){
  $.ajax({    
    type: "GET",
    url: "get_feed.php",             
    dataType: "html",                 
    success: function(response, status) {                    
        $("#remaining_response").html(response); 
    },
        complete: function() {
           setTimeout(repeatAjax,3000);//comment this line of code if you want to prevent further refreshing of image and username
       }

    });
};
repeatAjax2();
    function repeatAjax2(){
      $.ajax({    
        type: "GET",
        url: "get_feed.php?&tm=true",             
        dataType: "html",                 
        success: function(response, status) {                    
            $("#timer_response").html(response); 
        },
            complete: function() {
               setTimeout(repeatAjax2,1000);
           }

        });
    };