Simple Ajax PHP Countdown Timer

[baddotz]

hi guys im trying to build a auction system where by it will have a count down time and when users bid on the item it will extend for about 15 secs for each bid here are the example of the website that i wana make listed below

www.crazybid.sg

the pink color count down timer

what i have found is http://keith-wood.name/countdown.html

but how do i make it in ajax way of like httprequest to merge with countdown timer ?

like when users bids it will add the time to the existing countdown timer and after that the page will not refresh but it will refresh it in the back end?

Please Advise

[baddotz]

i want the time to adjust immediately when the user submits the bid, then just add 15 seconds to the timer after you successfully send the bid via ajax. can anybody help me ?

[baddotz]

Heres my code i am stucked with the retriving from database and adding a 10 sec time to the current product when a bid is placed




<link rel="stylesheet" media="screen,projection" type="text/css" href="css/reset.css" />
<link rel="stylesheet" media="screen,projection" type="text/css" href="css/main.css" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/main-msie.css" /><![endif]-->
<link rel="stylesheet" media="screen,projection" type="text/css" href="css/style.css" />
<link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
<style type="text/css">
@import "css/jquery.countdown.css";

#defaultCountdown { width: 180px; height: 45px; }
#defaultCountdown2 { width: 180px; height: 45px; }
#defaultCountdown3 { width: 180px; height: 45px; }
#defaultCountdown4 { width: 180px; height: 45px; }
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript">
$(function () {
var austDay = new Date();
var austDay2 = new Date();
var austDay3 = new Date();
var austDay4 = new Date();
var austDay5 = new Date();
var austDay6 = new Date();
var austDay7 = new Date();
austDay = new Date(austDay.getFullYear() + 1, 1 - 0, 26);
austDay2 = new Date(austDay2.getFullYear() + 1, 1 - 0, 20);
austDay3 = new Date(austDay3.getFullYear() + 1, 1 - 0, 18);
austDay4 = new Date(austDay4.getFullYear() + 1, 1 - 0, 17);
austDay5 = new Date(austDay5.getFullYear() + 1, 1 - 0, 15);
austDay6 = new Date(austDay6.getFullYear() + 1, 1 - 0, 13);
austDay7 = new Date(austDay7.getFullYear() + 1, 1 - 0, 10);
$('#defaultCountdown').countdown({until: austDay});
$('#year').text(austDay.getFullYear());
$('#year').text(austDay2.getFullYear());
$('#year').text(austDay3.getFullYear());
$('#year').text(austDay4.getFullYear());
$('#year').text(austDay5.getFullYear());
$('#year').text(austDay6.getFullYear());
$('#year').text(austDay7.getFullYear());

$('#defaultCountdown2').countdown({until: austDay2});
$('#defaultCountdown3').countdown({until: austDay3});
$('#defaultCountdown4').countdown({until: austDay4});
$('#defaultCountdown5').countdown({until: austDay5});
$('#defaultCountdown6').countdown({until: austDay6});
$('#defaultCountdown7').countdown({until: austDay7});
});
</script>