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);
}
});