Countdown script

JavaScript
1

Hey,

Below is code for a jquery countdown… How can I use this method to loop through a mysql database table and display a timer for each record in the table based on a date/time stored in one of the fields?


<script type="text/javascript" src="jquery.countdown.js"></script>

<script type="text/javascript">

$(function () {
var newserver = new Date(2012, 6 - 1, 28);
$('#defaultCountdown').countdown({until: newserver});
$('#removeCountdown').toggle(function() {
        $(this).text('Re-attach');
        $('#defaultCountdown').countdown('destroy');
    },
    function() {
        $(this).text('Remove');
        $('#defaultCountdown').countdown({until: newserver});
    }
);
});

</script>

	<div id="defaultCountdown"></div>

Cheers

2

You would need to rewrite the code so that it’s capable of working as multiple timers, and also by passing the required amount of time to each timer.
That way the PHP can write scripting code that just calls the function, and pass the amount of time to each timer.

3

Any chance of a bit of help to get started? Im not very knowlagable with jquery and ajax

4

When rewriting the code so that it’s capable of working as multiple timers, we look for which parts will need to be able to change.
From what I see in the code there are three parts. The date, the defaultCountdown and the removeCountdown.

We can set up a function that accepts those parameters:


function createCountdown(date, counter, remove) {
    ...
}

And adjust the contents within to work with those parameters.

That way your PHP can then create the div section for each countdown timer, and use the following code to add a new timer:


createCountdown(new Date(2012, 6 - 1, 28), 'defaultCountdown', 'removeCountdown');

Or if you have the information as an array, possibly as JSON data from the PHP code, you can loop through the array creating countdowns from that:


var countdownTimers = [
    {year: 2012, month: 6, day: 28, timer: 'countdownTimer1': remove: 'removeTimer1'}
    {year: 2012, month: 6, day: 29, timer: 'countdownTimer1': remove: 'removeTimer1'}
    {year: 2012, month: 7, day: 2, timer: 'countdownTimer1': remove: 'removeTimer1'}
],
    timerInfo,
    i;
for (i = 0; i < countdownTimers.length; i += 1) {
    timerInfo = countdownTimers[i];
    createCountdown(new Date(timerInfo.year, timerInfo.month - 1, timerInfo.day), timerInfo.timer, timerInfo.remove);
}