Use python variables in a external js file. Django

Question

I'm working in a Django project and I would like to have it tidy. Thus I decided (among other things) don't have de css styles and js scripts inside the html templates. With the css styles I have no problems, I have created a css folder inside the static folder and I save all my css files inside, it works perfectly.

My problem comes when I want to do the same with the js files that works with the python variables that comes from the views.py. Because it don't recognise they. How can I import this variables to the js external files?

Now I have this, but it don't works.

main.html

{% load static %}

<!DOCTYPE html>
<html lang="es">
    <head>
        <title> {% block title%}{% endblock%} </title>

        <meta charset="utf-8">

        <link rel="stylesheet" type="text/css" href="{% static "/css/main.css" %}">
        <link rel="stylesheet" type="text/css" href="{% static "/css/data.css" %}">

    </head>
    <body>
        <h1> WELCOME HOME </h1>
        <p>{{Data}}</p>

        /* This script has to be in a external js file. HERE WORKS
        <script>
            alert('{{Data}}');
        </script>*/

        {% block content %}{% endblock%}

        <script type="text/javascript" src="{% static "/js/data.js" %}"></script>
    </body>
</html>

data.js

alert('{{Data}}')
//alert({{Data}}) ERROR

If the alert has no python variables like alert("Hello world") it works well, but when I pass a Python variable it shows '{{Data}}'.

Thank you!

please go through this docs.djangoproject.com/en/2.2/ref/templates/builtins/… — Kabali
– Kabali, Commented Nov 14, 2019 at 12:45
version 2.2.5. I had read this link before but I can't see how externalise the js file — Lleims
– Lleims, Commented Nov 14, 2019 at 13:03

Kabali · Accepted Answer · 2019-11-14 14:18:16Z

6

we can do this in two ways..

1.

add the below line in your html file

{{ value|json_script:"mydata" }}

and fetch the above value to data.js file as below

var value = JSON.parse(document.getElementById('mydata').textContent);

2.

add the following tag at the below of this line

   <script type="text/javascript">
       var data= '{{ data }}' 
   </script>
   <script type="text/javascript" src="{% static '/js/token.js' %}"> 
   </script>

and you can fetch it like as usual javascript variable as follows in data.js file

 alert(data);

edited Nov 14, 2019 at 14:18

answered Nov 14, 2019 at 13:20

Kabali

3821 gold badge3 silver badges12 bronze badges

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

7 Comments

Lleims Over a year ago

The second option doesn't work, this var only will work inside the actual template. You are not exporting it to the new file token.js

Kabali Over a year ago

enclose the "/js/data.js" line with single quotes like '/js/data.js' in this tag < script type="text/javascript" src="{% static '/js/data.js' %}"></script>

Lleims Over a year ago

where is the mistake?

Kabali Over a year ago

in this line <script type="text/javascript" src="{% static "/js/data.js" %}"></script>

Lleims Over a year ago

Let us continue this discussion in chat.

|

rahul.m · Accepted Answer · 2019-11-14 12:49:28Z

1

you can pass it through function

try this

html :

demo({{var}})

js :

demo(var){
    alert(var)
}

hope it helps

answered Nov 14, 2019 at 12:49

rahul.m

5,8363 gold badges30 silver badges57 bronze badges

Collectives™ on Stack Overflow

Use python variables in a external js file. Django

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest