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

Question

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.

krasipenkov · Accepted Answer · 2016-10-28 14:11:13Z

3

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

edited Oct 28, 2016 at 14:11

answered Oct 28, 2016 at 6:30

krasipenkov

2,0141 gold badge13 silver badges13 bronze badges

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

6 Comments

BlueSun3k1 Over a year ago

Thanks for the code but it does not seem to work on my end. I get an empty cell where the timer should appear and the console does not display any errors coming from the code.

krasipenkov Over a year ago

Can you post result data? To check the code with real data example.

BlueSun3k1 Over a year ago

I've edited my question and added some sample data from the json result. is this what you were asking for? Another question, in your code, you placed the updateTimer function outside the ajax call. How could the result be passed to the function if it's outside the ajax result scope? I'm just wondering.

krasipenkov Over a year ago

Ok, can you try with my updated answer. var startStamp = []; was defined in ajax callback so it was not visible to updateTimer.

BlueSun3k1 Over a year ago

light up your cigar. It's working perfectly! Thank you very much for your help.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related