Created
June 7, 2019 02:18
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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"), |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
stole a day from me.