Ryan D Ryan D - 1 month ago 10
PHP Question

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

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

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

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);
       }

    });
};
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);
           }

        });
    };
Comments