Coundown Timer Inside ForEach Loop Php

Question

I am trying to Show a Countdown Timer Inside Foreach loop for every record in PHP Codeigniter Framework, It is basically showing Datediff between current date and mysql database date value as how many days left, Below is my code.Problem is it is showing countdown timer for single record only not for every record i need

 <?php foreach ($my_courses as $my_course):
     $course_details = $this->crud_model->get_course_by_id($my_course['course_id'])->row_array();
 
     <!-- countdown timer-->
                             
     <?php if ($course_details['is_onlineclass']==='Yes'): ?>
     <span style="display:inline-block;font-size:12px;font-color:crimson;"><?php 
     $t=$course_details['live_class_schedule_time'];
                                   
     //time difference in seconds for coundown timer
     $date = new DateTime();
     $date2 = new DateTime(date("yy-m-d h:i:s a", $t));  
     $diff = $date->getTimestamp() - $date2->getTimestamp() ;
     echo $diff;                                      
     ?></span>
                                  
     <span  id="<?echo $my_course['course_id']?>" class="timer" style="font-size:smaller;color:crimson;"></span>                                     
     <?php endif; ?>
                                 
     <script>
         var initialTime = <?echo $diff?>;

         var seconds = initialTime;
         function timer() {
         var days        = Math.floor(seconds/24/60/60);
         var hoursLeft   = Math.floor((seconds) - (days*86400));
         var hours       = Math.floor(hoursLeft/3600);
         var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
         var minutes     = Math.floor(minutesLeft/60);
         var remainingSeconds = seconds % 60;
         if (remainingSeconds < 10) {
         remainingSeconds = "0" + remainingSeconds; 
         }
         document.getElementById('<?echo $my_course['course_id']?>').innerHTML = days + "days " + hours + "hours " + minutes + "min " + remainingSeconds+ "sec left";
         if (seconds == 0) {
              learInterval(countdownTimer);
              document.getElementById('<?echo $my_course['course_id']?>').innerHTML = "Completed";
         } else {
           seconds--;
                }
         }
            var countdownTimer = setInterval('timer()', 1000);
                                      
         </script>

What is the wrong I am doing and How to show the timer for every record

Are you sure the foreach loop is working fine? Your countdown script is fine — Chilarai
– Chilarai, Commented Aug 17, 2020 at 4:52
for others record it is showing fine but echo $diff; and countdown timer is showing only for single record — Mithu
– Mithu, Commented Aug 17, 2020 at 4:53
I have changed the timer id to id="<?echo $my_course['course_id']?>" and now its html output is <span id="2" class="timer" style="font-size:smaller;color:crimson;">1days 4hours 57min 10sec left</span> getting only one course id — Mithu
– Mithu, Commented Aug 17, 2020 at 5:02
The way you are doing it is very rudimentary and it generates a lot of extra HTML and js code. but still, I have posted an answer for the way you are writing the code — Chilarai
– Chilarai, Commented Aug 17, 2020 at 5:15

Chilarai · Accepted Answer · 2020-08-17 07:02:05Z

2

Your function name and call should also be unique.

EDIT

Also you messed up a log of code. I have commented the foreach loop and put my own for loop. Modify accordingly

Try this.

<?php 


$my_course['course_id'] = 0;

for($i = 0; $i <= 2; $i++):
// foreach ($my_courses as $my_course):
// $course_details = $this->crud_model->get_course_by_id($my_course['course_id'])->row_array();

// You need to comment this out when you put your code live
$course_details['is_onlineclass'] = "Yes"; 
$course_details['live_class_schedule_time'] = time() + rand(0, 300); 
$my_course['course_id'] += 1;
// remove till here

if ($course_details['is_onlineclass']==='Yes'):
?>
    <span style="display:inline-block;font-size:12px;font-color:crimson;">
    <?php 
        $t=$course_details['live_class_schedule_time'];
                                    
        //time difference in seconds for coundown timer
        $date = new DateTime();
        $date2 = new DateTime(date("yy-m-d h:i:s a", $t));  
        $diff = $date->getTimestamp() - $date2->getTimestamp() ;
    ?>
    </span>
                                
    <span  id="<?php echo $my_course['course_id']; ?>" class="timer" style="font-size:smaller;color:crimson;"></span>                                     
<?php endif; ?>
                            
<script>
    var initialTime = <?php echo $diff; ?>

    var seconds = initialTime;
    function timer<?php echo $my_course['course_id'];?>() {
        var days        = Math.floor(seconds/24/60/60);
        var hoursLeft   = Math.floor((seconds) - (days*86400));
        var hours       = Math.floor(hoursLeft/3600);
        var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
        var minutes     = Math.floor(minutesLeft/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
        }
        document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = days + "days " + hours + "hours " + minutes + "min " + remainingSeconds+ "sec left";
        if (seconds == 0) {
            learInterval(countdownTimer);
            document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = "Completed";
        } else {
            seconds--;
        }
    }
    var countdownTimer = setInterval('timer<?php echo $my_course["course_id"];?>()', 1000);
                                
    </script>
<?php endfor; ?>

EDIT: Here is your code

<?php 

foreach ($my_courses as $my_course):
$course_details = $this->crud_model->get_course_by_id($my_course['course_id'])->row_array();


if ($course_details['is_onlineclass']==='Yes'):
?>
    <span style="display:inline-block;font-size:12px;font-color:crimson;">
    <?php 
        $t=$course_details['live_class_schedule_time'];
                                    
        //time difference in seconds for coundown timer
        $date = new DateTime();
        $date2 = new DateTime(date("yy-m-d h:i:s a", $t));  
        $diff = $date->getTimestamp() - $date2->getTimestamp() ;
    ?>
    </span>
                                
    <span  id="<?php echo $my_course['course_id']; ?>" class="timer" style="font-size:smaller;color:crimson;"></span>                                     
<?php endif; ?>
                            
<script>
    var initialTime = <?php echo $diff; ?>

    var seconds = initialTime;
    function timer<?php echo $my_course['course_id'];?>() {
        var days        = Math.floor(seconds/24/60/60);
        var hoursLeft   = Math.floor((seconds) - (days*86400));
        var hours       = Math.floor(hoursLeft/3600);
        var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
        var minutes     = Math.floor(minutesLeft/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
        }
        document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = days + "days " + hours + "hours " + minutes + "min " + remainingSeconds+ "sec left";
        if (seconds == 0) {
            learInterval(countdownTimer);
            document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = "Completed";
        } else {
            seconds--;
        }
    }
    var countdownTimer = setInterval('timer<?php echo $my_course["course_id"];?>()', 1000);
                                
    </script>
<?php endforeach; ?>

edited Aug 17, 2020 at 7:02

answered Aug 17, 2020 at 5:11

Chilarai

1,8882 gold badges18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Chilarai Over a year ago

Check now. You messed up a lot. I have commented the foreach loop and put my own for loop. Modify accordingly

Mithu Over a year ago

tried now showing two timer in same record not in every record see image pls imgur.com/xJrEtMW

Mithu Over a year ago

ok after I commented out this // You need to comment this out when you put your code live $course_details['is_onlineclass'] = "Yes"; $course_details['live_class_schedule_time'] = time() + rand(0, 300); $my_course['course_id'] += 1; // remove till here it is showing timer in first record only

Chilarai Over a year ago

@Mithu. You look into id="countdown", I believe. It must be from the CSS. But, I cannot predict the design with limited knowledge about your code. Check your CSS as already the timer is showing inside your foreach loop

Chilarai Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

Coundown Timer Inside ForEach Loop Php

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related