A
A
Ad4ptec2015-10-10 19:30:01
JavaScript
Ad4ptec, 2015-10-10 19:30:01

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 question

Ask a Question

731 491 924 answers to any question