title: How should I update progressbar using Ajax and MVC
body: <p>Being new to JSP I'm trying to get my head around things. Currently I'm trying to create a page which displays the progress of tasks running on the server. I have an undefined nr of running tasks, and I want to show these tasks on my jsp page. I currently have a working solution but the "tasks" div is updated every 3 seconds which means the bar animation is restarted and sometimes the pane "flickers"</p>
  
  <p>Is there a non hacky way to do this without having to overwrite all the tasks html?</p>
  
  <p>main JSP:</p>
  
  <pre><code>&lt;div id="tasks"&gt;&lt;/div&gt;
  ....
  &lt;script&gt;
  (function worker() {
      $.ajax({
          url : '/tasks/update_tasks',
          success : function(data) {
              $('#tasks').html(data);
          },
          complete : function() {
              setTimeout(worker, 3000);
          }
      });
  })();
  </code></pre>
  
  <p></p>
  
  <p>update_tasks.jsp:</p>
  
  <pre><code>&lt;body&gt;
  &lt;c:forEach var="task" items="${tasklist}"&gt;
      &lt;h3&gt;${task.name}&lt;/h3&gt;
      &lt;div class="progress"&gt;
          &lt;div
              class="progress-bar progress-bar-success progress-bar-striped active"
              role="progressbar" aria-valuenow="${task.currentProgress}"
              aria-valuemin="0" aria-valuemax="100"
              style="width: ${task.currentProgress}%"&gt;${task.currentProgress}%&lt;/div&gt;
      &lt;/div&gt;
  &lt;/c:forEach&gt;
  </code></pre>
  
  <p></p>
  
  <p>Controller:</p>
  
  <pre><code>@RequestMapping(value="/tasks/update_tasks",method = RequestMethod.GET)
  public ModelAndView retrieveUpdate() {
      ModelAndView modelAndView = new ModelAndView("/tasks/update_tasks");
      logger.debug("update tasks");
      //tasklist is an ArrayList&lt;TaskBean&gt;
      modelAndView.getModel().put("tasklist", tasksService.getTaskList());
      return modelAndView;
  }
  </code></pre>
  
  <p>TaskBean:</p>
  
  <pre><code>public class TaskBean {
      private String name;
      private String customerId;
      private int currentProgress;
  
      public TaskBean()
      {
          currentProgress = 0;
      }
      public String getName() {
          return name;
      }
      public void setName(String name) {
          this.name = name;
      }
      public String getCustomerId() {
          return customerId;
      }
      public void setCustomerId(String customerId) {
          this.customerId = customerId;
      }
      public int getCurrentProgress() {
          return currentProgress;
      }
      public void setCurrentProgress(int currentProgress) {
          this.currentProgress = currentProgress;
      }
  
  
  
  }
  </code></pre>