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 — Aylen
– Aylen, Commented Jun 23, 2015 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
– user3369264, Commented Jun 23, 2015 at 20:00

kaveh · Accepted Answer · 2015-06-23 20:24:40Z

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, 2015 at 20:24

kaveh

2,1561 gold badge22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

YPCrumble Over a year ago

what should canvasrender.js look like for this to work correctly? He can't use what he currently has...

das-g · Accepted Answer · 2015-06-23 19:58:16Z

-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, 2015 at 19:58

das-g

10.1k6 gold badges44 silver badges95 bronze badges

3 Comments

user3369264 Over a year ago

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 ?

das-g Over a year ago

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 Over a year ago

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.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related