Question

How can I make the jQuery animate when the ajax get the new input (via timeout – update without the refresh)? The getAVG.php returns avarage of the database field. Example page

The code:

(function(){
    var avg;
    $.ajax({
        type: "POST",
        url: "getAVG.php",
        error: function(data){
            avg = data;
            $('#kriips').animate({
                'left': avg*50
            });
            console.log("error: "+avg);
        },
        success: function(data){
            //alert(data);
            avg = data;
            $('#kriips').animate({
                'left': avg*50
            });
            console.log("suc: "+avg);
            //css('left',avg*50).animate();
        },
        timeout: 1000
    });
})();

Answer 1

I think your question is how to repeat the ajax call every second without refreshing the entire page. If so, just name the function and call it on success or error with setTimeout:

function myfunction(){
  var avg;
  $.ajax({
    type: "POST",
    url: "getAVG.php",
    error: function(XMLHttpRequest, textStatus, errorThrown){
        //your ajax request will not return the data on an error...
        console.log("error: "+errorThrown);
        setTimeout(function(){myfunction(); },1000);
    },
    success: function(data){
        //alert(data);
        avg = data;
        $('#kriips').animate({
            'left': avg*50
        });
        console.log("suc: "+avg);
        //css('left',avg*50).animate();
        setTimeout(function(){myfunction(); },1000);
    },
    timeout: 1000
  });
}