Hey there, I'm looking to make my progress bars dynamic using Javascript. I am currently working with Django and a Postgres DB. So far, I've been able to style them with a JS function, but now I want this function to trigger when the page loads.
In the view, I can pass the number of votes for each poll_product object and the total number of votes. I want to send these values as arguments to my JS function so that I can calculate the percentage and set it accordingly.
I hope that explanation was clear enough, but feel free to ask if you need more details.
{% for poll_product in poll_product_list %}
<form action="{% url 'add_vote' poll_product.id %}" method="POST">
{% csrf_token %}
<div class="row mt-1">
<div class="col-8">
<h5>{{ poll_product.product_type }} : {{ poll_product.votes }}</h5>
</div>
<div class="col-4">
{% if user.is_authenticated and not voted %}
<input type="submit" class="btn-sm btn-dark" value="Vote">
{% endif%}
</div>
/* ------------ below is the relevant part ---------------- */
<div class="col-6 progress">
<div id="{{poll_product.id}}" class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" ></div>
<script>setProgressBar('{{poll_product.votes}}', '{{total_votes}}', '{{poll_product.id}}');</script>
</div>
</div>
<input type="hidden" name="redirect_url" value="{{ request.path }}">
</form>
{% endfor %}