Update JavaScript with Django view values

Question

In the js file below

'use strict';
$(document).ready(function() {
    buildchart()
    $(window).on('resize', function() {
        buildchart();
    });
    $('#mobile-collapse').on('click', function() {
        setTimeout(function() {
            buildchart();
        }, 700);
    });
});
function buildchart() {
    $(function() {
        var graph = Morris.Donut({
            element: 'chart-pie-moris',
            data: [{
                    value: 60,
                    label: 'Order'
                },
                {
                    value: 20,
                    label: 'Stock'
                },
                {
                    value: 10,
                    label: 'Profit'
                },
                {
                    value: 5,
                    label: 'Sale'
                }
            ],
            ......

I want to be updating the values in buildchart() function the values returned by my views file functions. Example

def order(request):
    a = 'calculated integer value'
    return a

So I would like to pass in order function to replace 60 in buildchart() function. how can I achieve this? Please help a newbie

Rvector · Accepted Answer · 2021-09-13T14:15:26.080

1

To use a Django variable inside JavaScript

Just, surround the Django variable by " " or ' '. Like:

<script type="text/javascript"> 
   var a = "{{someDjangoVariable}}";
   var b = "{% url 'someDjangoUrl' %}";
</script>

If you want use access in a external js file Define the variable in the html file inside a <script> block. And access to it in the external .js file like a normal js global variable :

<script type="text/javascript"> 
   var a = "{{someDjangoVariable}}";
</script>
<script type="text/javascript" href="{% static 
'path/to/your_js_file.js' %}">
// In this file you can have access to the 'a' variable.
</script>

edited Sep 13 '21 at 14:15

answered Sep 12 '21 at 20:54

Rvector

2,312
1
8
17

Am using an external JavaScript file. So the JavaScript code is not in my html file – Sammy Sep 13 '21 at 12:14
I wasn't able to access it in the external js file – Sammy Sep 14 '21 at 22:57
How are you organized your scripts files ? – Rvector Sep 14 '21 at 23:00
In my html, am referencing the js file with `` – Sammy Sep 14 '21 at 23:02
Inside the `dashboards_ecommerce.js` is where I have the js file I used in the question – Sammy Sep 14 '21 at 23:04
Normally, you just have to load the external js file just after the `` . Did you do that ? i ask because i use is always and it work – Rvector Sep 14 '21 at 23:09
Yeah it works fine now. I was loading the external js file before `` – Sammy Sep 16 '21 at 07:11

Update JavaScript with Django view values

1 Answers1