Answer the question
In order to leave comments, you need to log in
How to modify jquery function to create multiple progress bars?
Initially, there is an ajax form, when clicking on the submit with the parameter onclick="getUniqId();" - a div block with a unique id appears below, in which the progress bar starts and reaches 100% in 20 seconds. Everything works fine, but the task is to ensure that when you click on submit again, the progress bar in the first block remains unchanged.
Now there are two problems: the first, when the first progress bar has successfully completed and I create the second one - the progress bar on the first block starts up again and goes along with the second one.
And the second problem, if you click on the submit twice with a short period of time - the percentages in the progress bars jump.
I think that the problem is in the function loaderInir(uniqId);, because it contains non-unique variables and they conflict with themselves. Please tell me how to solve this problem or at least give the right direction.
function loaderInit(uniqId) {
start = new Date();
maxTime = 20000;
timeoutVal = Math.floor(maxTime/100);
stopUpdate = false;
animateUpdate(uniqId);
function animateUpdate(uniqId) {
if (stopUpdate) {
return;
}
now = new Date();
timeDiff = now.getTime() - start.getTime();
perc = Math.round((timeDiff/maxTime)*100);
if (perc <= 90) {
updateProgress(perc, uniqId);
setTimeout(animateUpdate, timeoutVal, uniqId);
}
}
}
function updateProgress(percentage, uniqId) {
$('#progressbar-' + uniqId + '>.ui-widget-header').css('width', percentage + '%');
$('#progress_qty-' + uniqId).text(percentage + '%');
}
function getUniqId() {
uniqId = Math.round(new Date().getTime() + (Math.random() * 100));
addAccountBlock(uniqId);
}
function addAccountBlock(uniqId) {
$('.articles_container').prepend($('.create_hidden_block').clone().show().removeClass('create_hidden_block').prop('id', uniqId));
$('#' + uniqId + '>.progressbar_block>.progressbar').prop('id', 'progressbar-' + uniqId);
$('#' + uniqId + '>.progressbar_block>.progress_qty').prop('id', 'progress_qty-' + uniqId);
loaderInit(uniqId);
//дальше вызывается функция Juqery Ajax Form
//если все ок, прогресс бар останавливается и обновляется до 100%
stopUpdate = true;
updateProgress(100, uniqId);
//если ошибки просто останавливается и выводятся ошибки
stopUpdate = true;
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question