DOM only updating last element of the loop while diplaying progress

[Ashinsk]

I had an issue while diplaying the progress bar in HTML for a bunch of tasks which was being initiated in a loop. While the CeleryProgressBar was initiated for all the tasks, the progress was only being updated for the last task in the loop.

For a quick fix I had to create a function updateElements everytime before onProgress was called.

      updateElements(){
            this.progressBarElement = document.getElementById(this.progressBarElement.getAttribute('id'))
            this.progressBarMessageElement = document.getElementById(this.progressBarMessageElement.getAttribute('id'))
      }
      onData(data) {
            let done = false;
            if (data.progress) {
                  this.updateElements()
                  this.onProgress(this.progressBarElement, this.progressBarMessageElement, data.progress);
            }
            ........
      }

This solved my issue but would like to know if there is a better solution

[czue]

You were initializing each progress bar in the loop? Can you paste the calling code so I can see how this happens?

[Ashinsk]

I had initialized the prgress bar in my script in the loop like this

// vanilla JS version
document.addEventListener("DOMContentLoaded", function () {
	for (task_id of task_ids) {
		var pelement = document.getElementById("progress-bars");
		pelement.innerHTML += `
		<div>
			<div class='progress-wrapper'>
				<div id='bar-${task_id}' style="background-color: #68a9ef; width: 0%;">&nbsp;</div>
			</div>
			<div id="bar-message-${task_id}">Waiting for progress to start ${task_id}...</div>

			<div id="result-${task_id}"></div>
		</div>

		<br/><br/>
		`

		var progressUrl = "{% url 'celery_progress:task_status' task_id %}".replace("0", task_id);
		var c = CeleryProgressBar.initProgressBar(progressUrl, {
			pollInterval: 1000,
			resultElementId: `result-${task_id}`,
			progressBarId: `bar-${task_id}`,
			progressBarMessageId: `bar-message-${task_id}`
		});
	}
});