Django: How to keep JavaScript code separate in static folder when it uses a python variable

Question

I have a bunch of canvases that needs to be rendered. I don't want put the JavaScript code in a python loop, because I feel it's bad practice

home.html

{% load staticfiles %} 
<head>
    <script type="text/javascript" src="{% static 
    'canvas/canvasrender.js'   %}"></script>        
</head>

{% for canvas in user_canvas_set %}

    <canvas  class = "canvas" id="{{canvas.id}}" width="400" height="200" 
    canvas_post= ""{{canvas.canvas_post}}"" >
    Your browser does not support the HTML5 canvas tag.</canvas>

    **<script>
    canvasrenderNP.canvaswrite("{{canvas.id}}","{{canvas.canvas_post}}")
    </script>** 

{% endfor %}

I made a custom function that returns an array of the users canvas ids, because I use the canvas id as the id for the canvas element.

home.html

<script>
        alert("{{user_canvas_ids}}")
</script>

I get the desired output:

[247, 248, 251, 252]

Now when I put this in a static file

canvasrender.js

alert("{{user_canvas_ids}}")

then load it into home.html

{% load staticfiles %} 
<head>
    <script type="text/javascript" src="{% static 
    'canvas/canvasrender.js'   %}"></script>        
</head>

output:

"{{user_canvas_ids}}"

I am confused to as what is going on. I thought that the script tag inserts the js file in between the "<script> </script>"

I know I can make a element like so and get the attribute, but I feel like that is not good practice, or is it fine?

<p id="canvas_ids" canvas_ids ="{{user_canvas_ids}}"> </p >

Is there anything else I can do so that I can avoid writing JavaScript code in the HTML file?

Why this is not a duplicate question. It does not have anything about why the linked js file in the html page can not keep reference to the python variable. But if the JavaScript is coded in the html page it can

possible duplicate of [Django Template Variables and Javascript](http://stackoverflow.com/questions/298772/django-template-variables-and-javascript) — Aylen, Jun 23 '15 at 19:51
I checked it out, and it does not have anything about why the linked js file in the html page can not keep reference to the python variable. But if the JavaScript is coded in the html page it can . — user3369264, Jun 23 '15 at 20:00

score 2 · Answer 1 · answered Jun 23 '15 at 20:24

2

As you mentioned in your own comment, you can save user_canvas_id in a js variable in home.html and access it in your js file. Something like this:

<head>
    <script>var user_canvas_id = "{{ user_canvas_id }}"</script>
    <script type="text/javascript" src="{% static 'canvas/canvasrender.js' %}"></script>
</head>

answered Jun 23 '15 at 20:24

kaveh

2,046
1
21
33

what should canvasrender.js look like for this to work correctly? He can't use what he currently has... – YPCrumble Nov 10 '15 at 18:51

score -1 · Answer 2 · answered Jun 23 '15 at 19:58

-1

I am confused to as what is going on. I thought that the script tag inserts the js file in between the "<script> </script>"

Kinda, but this is done client-side, by the browser who has no idea about the special meaning of curly braces in Django templates.

And static in the context of Django means just that: That Django serves that file as-is, without running it through the template engine. (Which wouldn't help here anyway, as for the JavaScript file in isolation, the value of user_canvas_ids would be unknown, so the template engine couldn't substitute anything useful for it.)

answered Jun 23 '15 at 19:58

das-g

9,718
4
38
80

Would it be okay if I save the ids in a elements attribute and then access that through my isolated js file or is there a better solution ? – user3369264 Jun 23 '15 at 20:11
1

That might be ok. An alternative would be to serve the IDs via another view (e.g. as JSON) and let the code in your java script fetch them. – das-g Jun 24 '15 at 08:04
Which option is better is hard to say. Even the inline JavaScript snipped you want to avoid IMHO isn't too bad as long as it stays simple. – das-g Jun 24 '15 at 08:06

Django: How to keep JavaScript code separate in static folder when it uses a python variable

2 Answers2