0

i have registered custom post type and i have created custom columns for it one of those columns is count down it's functionality to cut the NowTime from the custom meta date and time i have set perviously so i got it work via javascript and it's fine but it gets only one value for all rows here is my code :

this the registered column

 case 'reminder':
        $reminder = remider_text();

        break;

this is the function with javascript

function remider_text(){
$date = get_post_meta($post_id, 'booking_date', true);
$date_format = "M d, Y";
$meta = (!empty($date)) ? date($date_format, $date) : "";
$time = get_post_meta($post_id, 'time', true);
$data = $meta ." ". $time;

if ($data == '') {
    echo 'N/A';
    ?>
    <?php
    } else { ?>
                  <div id="countdown"></div>

<script>
    console.log(data)
// Set the date we're counting down to
var countDownDate = new Date(data).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    var elms = document.querySelectorAll("[id='countdown']");
    for(var i = 0; i < elms.length; i++) 
    elms[i].innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";

    // Changing text color
    var elms_color = document.querySelectorAll("[id='countdown']");
    for(var i = 0; i < elms_color.length; i++) 
    elms_color[i].style.color = days === 0 && hours < 3 ? 'red' : '';

     // Changing text color
     var elms_color = document.querySelectorAll("[id='countdown']");
    for(var i = 0; i < elms_color.length; i++) 
    elms_color[i].style.color = days === 2 && hours < 5 ? 'orange' : '';

    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        for(var i = 0; i < elms.length; i++) 
        elms[i].innerHTML = "Outdated";
    }
}, 1000);
</script>
      <?php }
?>
<?php}

Here is the post meta date and time values

Aug 13, 2019 14:00
Oct 27, 2018 14:00
Oct 19, 2018 14:00
Oct 13, 2018 13:00
Oct 25, 2019 14:00
Oct 08, 2018 07:00

it just getting the last value for all rows

0

Although your question looks more like a generic javascript question than WordPress specific and would probably be better suited for another forum like stackoverflow.com, I would say the problem in your code is that you're using id="countdown" for all the countdown elements. You should use class="countdown" if you want to use the element multiple times on a single page. You can also check that you're getting all the right elements by doing a console.log(elems); after the document.querySelectorAll.

| improve this answer | |
  • thank @Antti Koskinen, the issue is how could i loop the counter with different value each time i have tried for each but not getting the expected results – abdelrhman kouta Oct 23 '18 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.