Jquery, Ajax, PHP number Incrementer

Question

So I'm trying to make an incrementer similar to this: http://www.usagain.com/ but I'm apparently missing code to get it to work. What am I missing from getting this to count? Here's my very similar code:

<html>
<head>
<title>Recycle Counter</title>
<script language="javascript" src="../jquery1.6.js"></script>
<script type="text/javascript">
    /*function rand(from, to)
    {
       return Math.floor(Math.random() * (to - from + 1) + from); // Generates random number
    }   rand(10000, 100000);*/

    function addCommas(nStr) //http://www.mredkj.com/javascript/nfbasic.html -- Source
    {
        nStr += '';
        x = nStr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        return x1 + x2;
    }

    $(function() {
        function updateNum(){
            $('#counter').load('test.php');
        }
        setTimeout(updateNum, 1000);
    }

</script>
<style type="text/css">
    #counterContainer{color: blue;font-family:Comic Sans MS;font-size:20px;}
    #counter{display:inline;}
</style>
</head>
<body onload="getNum()">
    <div id="counterContainer">
        Counter ::: <div id="counter">   </div>
    </div>
</body>
</html>

PHP

<?php

for(int $i = 0; $i < 100; $i++)
    echo $i;

?>

I imagine I need to write to a file at some point but I tried that earlier and had troubles. This time though it won't even show the count. Suggestion on what I can do?

You mean a preloader? That's generally a flash thing. I've asked a question similar to this once, http://stackoverflow.com/questions/7049303/show-progress-for-php-long-script — Madara's Ghost, Jan 04 '12 at 21:24
not like a preloader. I'm trying to increment a number but keep track of it at all times. Any time somebody is viewing the page I want the number to increment. I having a bunch of trouble with it though :/ — Howdy_McGee, Jan 04 '12 at 21:25
just out of interest why are you using regex to grab the number? just put it into a span and give it a unique id/class — jcuenod, Jan 04 '12 at 21:29

score 0 · Accepted Answer · answered Jan 04 '12 at 21:35

It looks like you're designed the code to run updateNum once, so your number should update 1 second after the page loads, then not at all after that.

You'll want to take a look at setInterval, which can call a function every X seconds, which should do the trick for you.

One thing you may want to think about is optimization. Here is what I would do (as an example) before you load the page, in PHP, take the average amount the counter is going up over a period of 30-60 seconds, then in your javascript, update the counter by that amount for a set period of time… maybe 5 minutes? After 5 minutes, run the ajax request again to get the latest average the counter is going up, and use javascript to update the counter for the next 5 minutes.

You could really bog down a server calling a counter every second, especially if a lot of people are viewing the site.

I was told that setInterval is unreliable and setTimeout was better but not the first time I've been misinformed :S - As for bogging down the server I agree, if I could do it all via JS I would but I gotta keep track of the number :/ and if the website I linked above can do it then it shouldn't be a problem. Thanks! I'll keep playing around with it. — Howdy_McGee, Jan 04 '12 at 21:43

Jquery, Ajax, PHP number Incrementer

1 Answers1