Auto refresh values in a group of <li> on a page after regular period of time

I have a set of <li> in my page as shown in here http://jsfiddle.net/gaby/zzj7E/5/

Each li has 3 spans... one for comments, one for view and one for vote.

 <a class="example7" href="userpanel/comment.php?id=578开发者_C百科" style="text-decoration:none; color:#666666; "><img src="content/comment/comments.png" width=18 height=18><i>No comments</i></a>
 <span style="text-decoration:none; color:none; margin:5px;"><img src="content/voting/eye.png" > 9</span> 
 <span class="vote"  id="578" name="up" style="text-decoration:none; color:none; margin:5px; "> <img src="/content/voting/yes-enb.png" width=12 height=12 alt=""> <span style="text-decoration:none; color:none">0 </span></span>

I want to autorefresh the values(count) in each of these elements every 2 mins. I know how to prepend/append divs but how to refresh selected elements in every li after a period of time?

This functionality is much similar to how Facebook autorefreshes the 'comment' count or 'like' count every time a user posts something.

Any ideas how I should go about it?

---

PHP is a server side scripting language, you cannot directly edit values that are already being displayed on the client computer. What you can do, however, is use AJAX to call a PHP script then parse the output into your spans (best method would be to JSON_encode your array on the PHP side then decode on the JS side..

function AJAX(){

    if (window.XMLHttpRequest)
                      {// code for IE7+, Firefox, Chrome, Opera, Safari
                      xmlhttp=new XMLHttpRequest();
                      }
                    else
                      {// code for IE6, IE5
                      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                      }
                    xmlhttp.onreadystatechange=function()
                      {
                      if (xmlhttp.readyState==4 && xmlhttp.status==200)
                        {

                        var data = xmlhttp.responseText;

                        var decoded = eval( "(" + data + ")" );

                        document.getElementById('span1').innerHTML = avayaevald['1'];
                        document.getElementById('span2').innerHTML = avayaevald['2'];
                        document.getElementById('span3').innerHTML = avayaevald['3'];


                        }
                      }

                    xmlhttp.open("GET","index.php?loadAction=process",false);
                    xmlhttp.send();

}

Then setInterval(AJAX(), 120000); and you'll be set.

---

use JavaScript setInterval for timer.

---

Like Chamika stated before, you'll need to use an interval, or timeout, either using setInteral('function', time_in_ms) or

setTimeout('function', time_in_ms)

However, what you really want is an AJAX compoment, you'll need to use an HTTP Request, and make a page handler for the request (whichever platform you're using).

a good way is using jquery ajax http://api.jquery.com/jQuery.ajax/

Good luck.

---

This will run a function every 2 minutes:

$(document).ready(function(){
    setInterval(function(){
        alert("yo");
    },120000); 
});

As for the ajax part, which server are you using? PHP? JSF?