Turning this percentage bar from PHP to AJAX?

Sorry I didn't know what would be the right place to post this.

I have a progress bar using PHP and HTML but it has to be refreshed every few minutes to check the progress...
I'm new to AJAX so was wondering how would I change it to AJAX so it the progress updates without refresh?

Here is the code (just the part of the code that is needed)

if ($currank == "one"){
$max = "200";
$old="0";
}elseif ($currank == "Two"){
$max = '400';
$old="200";
}elseif ($currank == "Three"){
$max = '800';
$old="400";
}elseif ($currank == "Four"){
$max = '1600';
$old="800";
}elseif ($currank == "Five"){
$max = '2000';
$old="1600";
}elseif ($currank == "Six"){
$max = '4000';
$old="2000";
}elseif ($currank == "Seven"){
$max = '6000';
$old="4000";
}elseif ($currank == "Eight"){
$max = '8000';
$old="6000";
}elseif ($currank == "Nine"){
$max = '10000';
$old="8000";
}elseif ($currank == "Ten"){
$max = '12500';
$old="10000";
}elseif ($currank == "Eleven"){
$max = '16000';
$old="12500";
}elseif ($currank == "Twelve"){
$max = '20000';
$old="16000";
}elseif ($currank == "Thirteen"){
$max = '25000';
$old="20000";
}elseif ($currank == "Fourteen"){
$max = '30000';
$old="25000";
}elseif ($currank == "Fifteen"){
$max = '37500';
$old="30000";

}elseif ($currank == "Sixteen"){
$max = '45000';
$old="37500";
}elseif ($currank == "Seventeen"){
$max = '55000';
$old="45000";
}elseif ($currank == "Eighteen"){
$max = '65000';
$old="55000";
}elseif ($currank == "Nineteen"){
$max = '80000';
$old="65000";
}elseif ($currank == "Twenty"){
$max = '100000';
$old="80000";
}elseif ($currank == "Twenty One"){
$max = '125000';
$old="100000";
}elseif ($currank == "Twenty Two"){
$max = '200000';
$old="125000";
} 
$percent = round((($rankp-$old)/($max-$old))*100);
?>
<table width=100 height=0 border=0 class=thinline cellpadding=0 cellspacing=0 bordercolor=#ffffff>
          <tr>
            <td width='$percent%' bgcolor='#0066CC'><div align=center><font color=#FFFFFF><b>
                $percent%</b></font></div></td>

            <td width='42%' bgcolor='#3399DD'><div align=center></div></td>
          </tr>
        </table>

PHP:

 

I would do a switch to replace those elseifs, and you don't need quotes for integers.

For ajax, I suggest you use a framework, one that supports all browsers such as jquery, prototype, mootools or midorijs. Because ajax alone doesn't do any browser checking and compatibility.

 

You might wnat to look into using prototype or jquery to do this; specifically, something like the jquery 'animate' function will let you create a dynamic loading bar.

http://api.jquery.com/animate/

 

You may use the SetInterval function to update the progress bar each 2 seconds (for example). Something like this (I'm using jQuery and didn't debug the code):

<?php
if ($currank == "one"){
$max = "200";
$old="0";
}elseif ($currank == "Two"){
$max = '400';
$old="200";
}elseif ($currank == "Three"){
$max = '800';
$old="400";
}elseif ($currank == "Four"){
$max = '1600';
$old="800";
}elseif ($currank == "Five"){
$max = '2000';
$old="1600";
}elseif ($currank == "Six"){
$max = '4000';
$old="2000";
}elseif ($currank == "Seven"){
$max = '6000';
$old="4000";
}elseif ($currank == "Eight"){
$max = '8000';
$old="6000";
}elseif ($currank == "Nine"){
$max = '10000';
$old="8000";
}elseif ($currank == "Ten"){
$max = '12500';
$old="10000";
}elseif ($currank == "Eleven"){
$max = '16000';
$old="12500";
}elseif ($currank == "Twelve"){
$max = '20000';
$old="16000";
}elseif ($currank == "Thirteen"){
$max = '25000';
$old="20000";
}elseif ($currank == "Fourteen"){
$max = '30000';
$old="25000";
}elseif ($currank == "Fifteen"){
$max = '37500';
$old="30000";

}elseif ($currank == "Sixteen"){
$max = '45000';
$old="37500";
}elseif ($currank == "Seventeen"){
$max = '55000';
$old="45000";
}elseif ($currank == "Eighteen"){
$max = '65000';
$old="55000";
}elseif ($currank == "Nineteen"){
$max = '80000';
$old="65000";
}elseif ($currank == "Twenty"){
$max = '100000';
$old="80000";
}elseif ($currank == "Twenty One"){
$max = '125000';
$old="100000";
}elseif ($currank == "Twenty Two"){
$max = '200000';
$old="125000";
} 
$percent = round((($rankp-$old)/($max-$old))*100);

if($_GET['ajax'] == 1){
    echo $percent;
    exit();
}
?>

<script type="text/javascript">
    function updateBar(){
        $.ajax({
            url: 'test.php',
            cache: false,
            data: 'ajax=1',
            type: 'GET',
            success: function(data){
                $('#progress').css('width', data);
            }
        });
    }
    
    $(document).ready(function(){
        var x = setInterval('updateBar()', 2000);
    });
</script>
<table width=100 height=0 border=0 class=thinline cellpadding=0 cellspacing=0 bordercolor=#ffffff>
          <tr>
            <td id="progress" style="width: 0;" bgcolor='#0066CC'><div align=center><font color=#FFFFFF><b>
                $percent%</b></font></div></td>

            <td width='42%' bgcolor='#3399DD'><div align=center></div></td>
          </tr>
        </table>

PHP:

I didn't get what would the $currank variable is. This solution would call the php code every 2 seconds, so you'll have to adapt the php code to this reality.

Also consider using a switch control structure - it turns the code more clean and "readable".

 

I'd suggest finding an equation to calculate $max and $old to remove if/else and switch statements completely.

Depending on what its for, you could possibly use Javascript to change the progress bars and not have to make Ajax calls so frequently.