BlueSun3k1 BlueSun3k1 - 1 month ago 9
MySQL Question

PHP-jQuery: Display a timer on each table row where end time is not set

I have a function that displays a countup timer but I've only been able to make it work for a single row. I'd like to make a timer appear on each row where the end time of the action has not yet been set.

This is the full code.

<script>
$('document').ready(function()
{
var uni_id = //value of id needed to query the database table;
$.ajax({
type : 'POST',
url : 'get_time.php',
dataType: 'json',
data : {uni_id: uni_id},
cache: false,
success : function(result)
{
for (var i = 0; i < result.length; i++){

var startDateTime = new Date(result[i].uni_start_time); //Not sure if it's wrong to add all returning values here but so far it works but only for a single row on the table.
var startStamp = startDateTime.getTime();
var newDate = new Date();
var newStamp = newDate.getTime();
var timer;
var rec_id = result[i].rec_id;


function updateTimer() {
newDate = new Date();
newStamp = newDate.getTime();
var diff = Math.round((newStamp-startStamp)/1000);

var days = Math.floor(diff/(24*60*60));
diff = diff-(days*24*60*60);
var hours = Math.floor(diff/(60*60));
diff = diff-(hours*60*60);
var minutes = Math.floor(diff/(60));
diff = diff-(minutes*60);
var seconds = diff;

days = (String(days).length >= 2) ? days : '0' + days;
hours = (String(hours).length >= 2) ? hours : '0' + hours;
minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

$("#on_going_"+rec_id).html(hours+':'+minutes+':'+seconds);
}
setInterval(updateTimer, 1000);


$('#uni_time_table tbody').append(
'<tr>'
+'<td class="center hidden" id="'+result[i].rec_id+'">' + result[i].rec_id + '</td>'
+'<td class="center">' + result[i].uni_id + '</td>'
+'<td>' + result[i].uni_name + '</td>'
+'<td>' + result[i].uni_loc + '</td>'
+'<td class="center">' + result[i].uni_date + '</span></td>'
+'<td class="center">' + result[i].uni_start_time + '</td>'
+(result[i].uni_end_time == null ?
'<td class="center"></td>' //this will always be empty if the uni_end_time is not set.
:
'<td class="center">' + result[i].uni_end_time + '</td>'
)
+(result[i].uni_end_time == null ?
'<td class="center" id="on_going_'+result[i].rec_id+'"></td>' //the timer will only be triggered here if the uni_end_time is not set.
:
'<td class="center">' + result[i].uni_total_time + '</td>' //this will display the total time as long as the uni_end_time is set.
)
+'</tr>');
}
}
});
});
</script>


So far, only the first entry in the table displays the timer. Every time I add another entry, that second entry just remains blank while the timer still works with the first entry.

How can I make the timer work for each row on the table?

EDIT: Sample Data from json

rec_id "1"
uni_date "2016-10-28"
uni_loc "Custom Location"
uni_id "2356"
uni_name "Custom Name"
uni_start_time "10/28/2016 09:04:28"
uni_end_time null
uni_total_time null // this shows null because end_time is empty which is when the timer should kick in.

Answer

Here is a solution for you with little modifications of your code:

var startStamp = [];

function updateTimer(result) {

    var newDate = new Date();
    var newStamp = newDate.getTime();

    for (var j = 0; j < result.length; j++) {
        newDate = new Date();
        newStamp = newDate.getTime();
        var diff = Math.round((newStamp-startStamp[j])/1000);

        var days = Math.floor(diff/(24*60*60));
        diff = diff-(days*24*60*60);
        var hours = Math.floor(diff/(60*60));
        diff = diff-(hours*60*60);
        var minutes = Math.floor(diff/(60));
        diff = diff-(minutes*60);
        var seconds = diff;

        days = (String(days).length >= 2) ? days : '0' + days;
        hours = (String(hours).length >= 2) ? hours : '0' + hours;
        minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
        seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

        $("#on_going_"+result[j].rec_id).html(hours+':'+minutes+':'+seconds);
    }
}

$('document').ready(function()
{
        var uni_id = 1;//
        $.ajax({
            type : 'POST',
            url  : 'get_time.php',
            dataType: 'json',
            data : {uni_id: uni_id},
            cache: false,
            success :  function(result) {

                for (var i = 0; i < result.length; i++) {
                    var startDateTime = new Date(result[i].uni_start_time);
                    startStamp[i] = startDateTime.getTime();

                    $('#uni_time_table tbody').append(
                        '<tr>'
                        + '<td class="center hidden" id="' + result[i].rec_id + '">' + result[i].rec_id + '</td>'
                        + '<td class="center">' + result[i].uni_id + '</td>'
                        + '<td>' + result[i].uni_name + '</td>'
                        + '<td>' + result[i].uni_loc + '</td>'
                        + '<td class="center">' + result[i].uni_date + '</span></td>'
                        + '<td class="center">' + result[i].uni_start_time + '</td>'
                        + (result[i].uni_end_time == null ?
                            '<td class="center"></td>' //this will always be empty if the uni_end_time is not set.
                            :
                        '<td class="center">' + result[i].uni_end_time + '</td>'
                        )
                        + (result[i].uni_end_time == null ?
                        '<td class="center" id="on_going_' + result[i].rec_id + '"></td>' //the timer will only be triggered here if the uni_end_time is not set.
                            :
                        '<td class="center">' + result[i].uni_total_time + '</td>' //this will display the total time as long as the uni_end_time is set.
                        )
                        + '</tr>');
                }

                setInterval((function () {
                    updateTimer(result);
                }), 1000);
            }
        });
});