Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript timer gets "scrambled" when refreshing screen with Ajax

    Hi there,

    This is my first post here! I hope someone can help me with this.

    I am developing a Auction Site with Wordpress / Woocommerce / Woocommerce Auction.

    On this site I am using a javascript countdown timer for each product in an listview so that each product has its end-of-auction timer.

    Every ten seconds the content part of the list gets refreshed by an Ajax script to make sure that the visitor can view the current bid.

    When entering the listview, all Timers run correctly according the end-of-auction time. However, after a few "Ajax-refresh moments" the timers get "scrambled". The seconds are blinking between two seconds. This does only apear after a few refreshes... It looks like that the script is holding on to an older time.

    You can view the listview here!

    The Javacsript Timer Code:
    Code:
    	
        var nowset = new Date(start.replace(/\-/g, '\/'));
        var nownowset = nowset.getTime();
    	var ender = new Date(eind.replace(/\-/g, '\/'));
    	
        var client_end = new Date();
        var end = ender.getTime();
    	//alert(end);
        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;
    
        function showRemaining() {
            nownowset = nownowset+_second;
    
    		var now = new Date();
            var distance = end - now;
            if (distance < 0) {
    
                clearInterval(timer);
                document.getElementById(kavel).innerHTML = 'GESLOTEN!';
    
                return;
            }
    
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);
            var countOutput = "";
            if ((distance / 1000) < 3600) {
                countOutput = '<font color="#000000">';
            } else if ((distance / 1000) < 7200) {
                countOutput = '<font color="#000000">';
            } else {
                countOutput = '<font color="#000000">';
            }
            countOutput += days + ' dagen ';
            countOutput += hours + ' uur ';
            countOutput += minutes + ' minuten ';
            countOutput += seconds + ' seconden</font>';
            countOutput += '</font>';
            document.getElementById(kavel).innerHTML = countOutput;
        }
    
        timer = setInterval(showRemaining, 1000);
    }
    Fetching the Timer
    Code:
    <script type="text/javascript">
    	var id = "";
    	var st = ""
    	var dt = "";
    	id = "action_<?php echo get_the_ID(); ?>";
    	st = '<?=date("Y-m-d H:i:s");?>';
    	dt = "<?php echo $postMeta['_ignitewoo_auction_end_date_time'][0]; ?>";
    	document.getElementById(id).innerHTML = "";
    	CountDownTimer(dt, st, id);
    </script>
    Code for Ajax refreshing
    Code:
    	<script>
                    loadItem();
                	var count = 0;
                    function loadItem() {
                            $.ajax({
    							
                                url: "auction_list.php?<?=$_SERVER['QUERY_STRING']?>",
                                cache: false,
                                success: function(html){
                                    $(".auctionlist").empty().html(html);
                                    setTimeout(function () {
                                        	loadItem();
                                    }, 10000);
                                },
                                error:function (xhr, ajaxOptions, thrownError){
                                        $(".auctionlist").empty().html('Er is een fout opgetreden:'+ xhr.status + ' '+ thrownError);
                                   		loadItem();
    							    }    
                            });
                        }
                    </script>

    I really hope that someone can help me with this...

    Thanks in advance!!


    With kind regards,
    Douwe

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    	var id = "";
    	var st = ""
    	var dt = "";
    	id = "action_<?php echo get_the_ID(); ?>";
    	st = '<?=date("Y-m-d H:i:s");?>';
    	dt = "<?php echo $postMeta['_ignitewoo_auction_end_date_time'][0]; ?>";
    	document.getElementById(id).innerHTML = "";
        clearTimeout(timer);
    	CountDownTimer(dt, st, id);
    
    
    
        function showRemaining() {
           clearTimeout(timer);
           nownowset = nownowset+_second;
    
    		var now = new Date();
            var distance = end - now;
            if (distance < 0) {
    
                clearInterval(timer);
                document.getElementById(kavel).innerHTML = 'GESLOTEN!';
    
                return;
            }
    
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);
            var countOutput = "";
            if ((distance / 1000) < 3600) {
                countOutput = '<font color="#000000">';
            } else if ((distance / 1000) < 7200) {
                countOutput = '<font color="#000000">';
            } else {
                countOutput = '<font color="#000000">';
            }
            countOutput += days + ' dagen ';
            countOutput += hours + ' uur ';
            countOutput += minutes + ' minuten ';
            countOutput += seconds + ' seconden</font>';
            countOutput += '</font>';
            document.getElementById(kavel).innerHTML = countOutput;
        }
    
        timer = setInterval(showRemaining, 1000);
       }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •