Refreshing a html table which has a progress bar

Question

I have a requirement which is nothing but progress bar inside a table column which should be active. I will have plenty of bootstrap progress bar(Say some 10) and I am using spring mvc in server side. Now the problem is I don't know how to update the progress bar constantly(Say some every 10secs) without refreshing the entire page, to be more precise I want the html table to be refreshed every 10 secs, it should hit the server and the value of the progress bar should be applied to the progress bar inside the html table.

Can some one please suggest how to do this requirement, I am really in need of help and any example links which would actually help me to achieve this. I am not expert in javascript/ajax( I guess its possible to achieve this using ajax, I could not find any examples in google either). If this is achievable using javascript(nor ajax) any example links would actually help me a lot. Thanks in advance :)

Answer 1

On the javascript side you would have a js function making a $.ajax call

function getProgress(){
  $.ajax({
    url: "/myurl",
    success : function(data){
      //TODO here update your progressbar data=XX returned by spring
      if(data!=100){
         setTimeout(getProgress,10000);//reschedule again until job finished
      }
    }
  })
}
setTimeout(getProgress,10000);

on the spring side :

in a controller you will return the progress :

@RequestMapping("/myurl")
public @ResponseBody String getProgrees(){
  //TODO business logic
  return "XX";//0-100
}