Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save patrickscottbest/12c4a1632dbfb09ab537111fd72ed190 to your computer and use it in GitHub Desktop.
Save patrickscottbest/12c4a1632dbfb09ab537111fd72ed190 to your computer and use it in GitHub Desktop.
how to draw a javascript progress bar on a page from a django view
<div class="progress">
<div id="dynamic" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span id="current-progress"></span>
</div>
</div>
<script>
var current_progress = 0;
var interval = setInterval(function() {
var progressUrl = '{% url "detail_tasks" object.uuid %}';
fetch(progressUrl, {
headers: {
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
credentials: 'include'
})
.then(function(response) {
response.json().then(
function(data) {
current_progress = data.progress_percent;
console.log("here");
$("#dynamic")
.css("width", current_progress + "%")
.attr("aria-valuenow", current_progress)
.text(current_progress + "% Complete");
})
})
if (current_progress >= 100) {
// do something here like hide the DIV and then stop the polling
// you could even slow down the interval and check less frequently to see if you need to light up another task monitor bar
clearInterval(interval); };
}, 1000);
</script>
............ and from within views ............
def tasks_view(request, uuid)
// // pseudocode
//get the object in question
//get the tasks or gather the flags to determine how that object is doing on whatever it's doing
//prepare the response
response_data = {
'state': "PENDING", # unused in my example
'details': "x of y completed", # unused in my example
'progress_percent': 45,
}
from django.http import JsonResponse
return JsonResponse(response_data)
#return HttpResponse(json.dumps(response_data), content_type='application/json') # alternative without JsonResponse
----------- urls.py
path('/object/detail/tasks/<uuid:uuid>/', views.tasks_view, name="detail_tasks"),
@patrickscottbest
Copy link
Author

stole a day from me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment