Hi,

In a following piece of code i am create a progress bar and showing its progress as the ajax request get processed.

i am faking the progress shown here just by adding 5 in to cnt counter variable after that i made a check when counter reach to 90. at this point if the request is not executed successfully then i will pause/disable the progress bar and whenever response come i will complete the whole progress bar with 100.

now the problem is i want to add multiple progress bar as i am firing multiple ajax request. so following is the code to implement only for one request and one progress bar but i want it for more than one. as global variables are used over here for checking response and timer id so i don't know how well i can handle it for multiple request

var cnt=0;
var res=null;

function getProgress(data){

res=data;

}
var i =0;
$('#start').click(function(){

i = setInterval(function() {

if(res!=null)
{

    clearInterval(i);
    $("#pb1").progressbar( "option", "value", cnt=cnt+100 );
}
var value = $("#pb1").progressbar("option", "value");
if(value >=90 && res==null){
$("#pb1").progressbar("option", "disable");
}
else{
$("#pb1").progressbar( "option", "value", cnt=cnt+5 );
}

},2500);

$.ajax({
url: 'http://localhost/beta/demo.php',
success: getProgress
});


});


$("#pb1").progressbar({

value: 0 ,
change: function(event, ui) {

if(res!=null)
clearInterval(i);

}
});