Question

<script>
 $(document).ready(function() {

 $.get("database.php", function(data){
  var xp = data + "%";
  $('#exp_bg').animate({
   width: xp
  }, 1500, function() { });
 });

});
</script>

Database.php:

<?php
 $xp = 50;
 $level = 100;

 $xp_percent = $xp * 100 / $level;
 echo $xp_percent;
?>

What i’m trying to do, is that if $xp_percent increases in database.php, then #exp_bg’s width will animate into desired width without refresh.

I tried to do that with time interval, which takes data from database.php every speciefed interval of time, but i failed doing that.

Could anyone help me with that?

Answer 1

Your probably going to have to put it inside a setTimeout function like so:

var refreshId = setInterval(function() { 

$.get("database.php", function(data){
  var xp = data + "%";
  $('#exp_bg').animate({
   width: xp
  }, 1500, function() { });
 });


}, 1000);

This would check every second.