html - How to refresh a section or block of page by php with out reloding?

456

I write a timer in a table with tr and td tag by php, the below code show it

$time_now=time();
$time_check=$fetch_time ['time_vam_give']+($durday1*24*60*60);
$remaining=$time_check-$time_now;
$time_remain_day=floor(($remaining)/(24*60*60));
$hours_remaining = floor(($remaining % 86400) / 3600);
$minute_remainig=floor((($remaining % 86400) % 3600)/60);
$second_reminig=((($remaining % 86400) % 3600)%60);
Echo “<table><tr class='tr1' style='background-color: #CC8A10' >
<td class='td1' style='background-color: #CC8A10'>Day</td>
<td class='td1' style='background-color: #CC8A10'>Hour</td>
<td class='td1' style='background-color: #CC8A10'>Minute</td>
<td class='td1' style='background-color: #CC8A10'>Second</td></tr>
 <tr class='tr1'><td class='td1' style='background-color: #FC1359'>$time_remain_day</td>
<td class='td1' style='background-color: #FC1359'>$hours_remaining</td>
<td class='td1' style='background-color: #FC1359'>$minute_remainig</td>
<td class='td1' style='background-color: #FC1359'>$second_reminig</td></tr>”;

And for refresh I have one that refresh all of page be this code

$page = $_SERVER['PHP_SELF'];
$sec = "5";
header("Refresh: $sec; url=$page");

But the refresh code, refresh all of page and all of object should be refreshed, I want only the code in table that contain Time’s variable, How can I do it? Additionally I use Iframe but using this tag such as screen shot of page and it is not suitable and beauty.

echo " <iframe id='dynamic-content' src='../function/Func1.php' ></iframe>";

Best Regards.

156

Answer

Solution:

to refresh without reloading you should use ajax

you can use something like this

make 2 php files the first index.php

<script src="http://code.jquery.com/jquery-latest.js">

</script>
<script>
    $(document).ready(function(){
     setInterval(ajaxcall, 1000);
 });
 function ajaxcall(){
     $.ajax({
         url: 'gettime.php',
         success: function(data) {
             data = data.split(':');
             $('#days').html(data[0]);
             $('#hours').html(data[1]);
             $('#minutes').html(data[2]);
             $('#seconds').html(data[3]);
         }
     });
 }
</script>

<table>
    <tr class='tr1' style='background-color: #CC8A10'>
        <td class='td1' style='background-color: #CC8A10'>Day</td>
        <td class='td1' style='background-color: #CC8A10'>Hour</td>
        <td class='td1' style='background-color: #CC8A10'>Minute</td>
        <td class='td1' style='background-color: #CC8A10'>Second</td>
    </tr>
    <tr class='tr1'>
        <td class='td1' style='background-color: #FC1359'><span id="days">0</span></td>
        <td class='td1' style='background-color: #FC1359'><span id="hours">0</span></td>
        <td class='td1' style='background-color: #FC1359'><span id="minutes">0</span></td>
        <td class='td1' style='background-color: #FC1359'><span id="seconds">0</span></td>
    </tr>
</table>

Write your answer

Share solution ↓

Additional Information:

Date the issue was resolved:

2022-10-26

Link To Source
Link To Answer People are also looking for solutions of the problem: trying to access array offset on value of type bool in

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question