Using javascript to update HTML in python loop

Question

I'm currently trying to integrate a progress bar to my website. I've successfully put it in my web page, and I am trying to animate it now.

I have a js script that updates the progress bar every second, which is exactly what I want, but the problem is that if you refresh the page, the progress bar gets back to the beginning, even if it was in progress when the page was refreshed.

So I've decided to use python, to start a thread, so refreshing the page would not make the progress bar going back to 0%, and that is basically a loop that calculates the percentage of progress every second.

I'm now trying to find a way to make my progress bar moving by changing the HTML and the CSS every second.

So, my question is : Can I call a js function from my python thread? And if it's not possible, is there a way to update HTML directly from python? Like a library or something?

If you have any other idea about this, do not hesitate.

If you wonder how the code looks like, here is a part of the python :

print "starting test"
while s <= total:
   percent = (100 * s) / total
   print percent
   res["data"]["value"] = percent
   //!\\-->Want to send RES to JS
   time.sleep(1)
   s = s + 1
print "test is over"

and here is a part of the js :

if (data.type == "init") {  
console.log("Receiving Init info");
}
else if (data.type == "record") {
console.log("Receiving record info");
    if (data.data.object == "progress-bar") {
    var elem = document.getElementById("myBar");
    elem.style.width = data.data.value + '%';
    document.getElementById("label").innerHTML = data.data.value * 1 + '%';
    }
}

Thanks in advance!

Answer 1

You can use Web Sockets and in javascript you can receive the data from server and update the progress bar. Please check the article below:

Web Sockets