CODEWITHSUNDEEP
phpjquerymysqlajax
BlueSun3k1
BlueSun3k1

Reputation: 767

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.

Upvotes: 3

Views: 412

Answers (1)

krasipenkov
krasipenkov

Reputation: 2029

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);
            }
        });
});

Upvotes: 3

Related Questions