Im trying to add javascript countdown into a table, which this table was locate in php foreach
My php code goes like this:
<?php
global $wpdb, $indeed_db;
$user = wp_get_current_user();
$userid = $user->ID;
$woo_orders = $wpdb->get_results("SELECT * FROM wp8u_wc_order_product_lookup");
foreach ($woo_orders as $print ){
$order_id = $print->order_id;
$woo_customer_id = $print->customer_id;
$woo_customer = $wpdb->get_results("SELECT * FROM wp8u_wc_customer_lookup where customer_id=$woo_customer_id");
foreach($woo_customer as $print2){
$current_user_uid = $print2->user_id;
}
$date1 = strtotime($print->date_created);
$date2 = strtotime("+1 months", $date1);
$date_created = date('Y-m-d H:i:s', $date1);
$date_after = date('Y-m-d H:i:s', $date2);
$amount = $print->product_net_revenue;
if($userid == $current_user_uid){
?><table>
<tr>
<th>Order ID</th>
<th>My ID</th>
<th>My Customer ID</th>
<th>Create Date</th>
<th>Date After 1 Month</th><
<th>Amount</th>
</tr>
<tr>
<td><?php echo "$order_id";?></td>
<td><?php echo "$current_user_uid";?></td>
<td><?php echo "$woo_customer_id";?></td>
<td><?php echo "$date_created";?></td>
<td><?php echo "$date_after";?></td>
<td><?php echo "$amount";?></td>
<td id="demo2"></td>
</tr>
</table><?php
}
}
?>
This is my output before for the above php code:
Order ID | My ID | My Customer ID | Create Date | After 1 month | Amount | Timer |
126 37 9 2020-06-24 13:45:35 2020-07-24 13:45:35 3000
Order ID | My ID | My Customer ID | Create Date | After 1 month | Amount | Timer |
123 37 9 2020-06-22 12:01:14 2020-07-22 12:01:14 1000
so im trying to add countdown timer to both row under "Timer" Column
and this is my java script countdown timer code:
<script>
function createCountDown(elementId, date){
var countDownDate = new Date(date).getTime();
var x = setInterval(function(){
var now = new Date().getTime();
var distance = (countDownDate) - (now);
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);
document.getElementById(elementId).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0)
{
clearInterval(x);
document.getElementById(elementId).innerHTML = "SUCCESS";
}
}, 1000);
}createCountDown("demo", <?php echo "$date_after"; ?>)
</script>
How do i add this javascript countdown timer in to the table ?
I quickly cobbled a demo to show how you might accomplish your goal without using ID attributes. I assumed that each row in the table is supposed to display a countdown timer?!
The sql, btw, looks like a suitable candidate for a join - which would mean using a single query but that is another thing entirely ~ just thought I'd mention it.
If you copy/run this you should see how it works - the tables being generated contain dummy data.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
body{font-family:monospace}
table{margin:0 auto 3rem auto;width:60%;float:none;border:1px solid gray;}
th{background:gray;color:white}
.timer{color:red}
</style>
<script>
/*
The function now accepts a DOM element as the first argument
rather than a string to represent the ID of a DOM element.
The original element has had it's ID replaced with a className
and, to make DOM navigation easier, the table-cell that holds
the date used in the countdown also has a className assigned.
*/
function createCountDown(n, date){
var countDownDate = new Date( date ).getTime();
var x = setInterval( function(){
var now = new Date().getTime();
var distance = countDownDate - now;
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);
n.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if( distance < 0 ) {
if( !isNaN( x ) )clearInterval( x );
n.innerHTML = "SUCCESS";
}
}, 1000 );
}
/*
Using the `.timer` className find a collection of all table-cells
that will display a countdown.
Iterate through that nodelist collection, find the sibling row
with the date and assign the countdown.
*/
document.addEventListener( 'DOMContentLoaded',()=>{
Array.from( document.querySelectorAll( 'td.timer' ) ).forEach( td=>{
/*
find the sibling table-cell according to it's assigned className
and thus obtain the cell contents. Supply both as arguments to the
`createCountDown` function
*/
let expiry_date=td.parentNode.querySelector( '.expiry' ).textContent;
createCountDown( td, expiry_date );
});
});
</script>
</head>
<body>
<?php
for( $i=1; $i <= 5; $i++ ){
$h=mt_rand(8,18);
$m=mt_rand(1,59);
$s=mt_rand(1,59);
$month=date('m');
$day=mt_rand(1,29);
$year=2020;
$created=date('Y-m-d H:i:s',mktime($h,$m,$s,$month,$day,$year));
$expires=date('Y-m-d H:i:s',mktime($h,$m,$s,$month+1,$day,$year));
printf(
'
<table>
<tr>
<th>Order ID</th>
<th>My ID</th>
<th>My Customer ID</th>
<th>Create Date</th>
<th>Date After 1 Month</th>
<th>Amount</th>
<th>Countdown</th>
</tr>
<tr>
<td>$order_id</td>
<td>$current_user_uid</td>
<td>$woo_customer_id</td>
<td>%s</td>
<td class="expiry">%s</td>
<td>$amount</td>
<td class="timer"></td>
</tr>
</table>
',
$created,
$expires
);
}
?>
</body>
</html>