Django - passing variable to javascript file within same script tag

Question

I am trying to pass my variable from Django's view to a javascript file. I read the stack question here (How can I pass my context variables to a javascript file in Django?) to get a few guidance but I am trying something a little bit different. I want to pass variable to the javascript file within that particular javascript reference script tag or changing the order of variable declaration. It is easier to show by example:

My somerandom.js:

console.log(variable);

What works:

{% extends base.html %}
{% load static %}
{% block body %}
    <h1> Hello, World! </h1>
{% endblock body %}
{% block javascript %}
    <script>
      var variable = {{ my_var }};
    </script>
    <script src="{% static "app1/bootstrap/js/somerandom.js" %}"></script>
{% endblock javascript %}

What doesn't work:

Edit: It doesn't work because the in developer tool (press F12 in Chrome) I see this error: Uncaught ReferenceError: variable is not defined

1:

{% extends base.html %}
{% load static %}
{% block body %}
    <h1> Hello, World! </h1>
{% endblock body %}
{% block javascript %}
    <script src="{% static "app1/bootstrap/js/somerandom.js" %}"></script>
    <script>
      var variable = {{ my_var }};
    </script>
{% endblock javascript %}

2:

{% extends base.html %}
{% load static %}
{% block body %}
    <h1> Hello, World! </h1>
{% endblock body %}
{% block javascript %}
    <script src="{% static "app1/bootstrap/js/somerandom.js" %}">
      var variable = {{ my_var }};
    </script>
{% endblock javascript %}

Reason I want those 2 to work is so I can organize and refer to my variables properly once my code gets longer. And in this link (http://www.mutaku.com/wp/index.php/2012/03/accessing-django-template-variables-in-javascript/), it shows that we can declare variable after referencing the javascript file.

what does not work? can you give us an error string, or some stack trace? What is the "error" you see? — jperelli
– jperelli, Commented Sep 8, 2017 at 2:56
I added the error message I see. Basically it says "variable is not defined". — addicted
– addicted, Commented Sep 8, 2017 at 3:00
If your somerandom.js tries to access variable it is normal to get this error as you declare it later. I highly doubt the method in the page you linked to would work. — Selcuk
– Selcuk, Commented Sep 8, 2017 at 6:44
somerandom.js is accessing variable (it basically outputs variable content through console). Is there any method whereby I can declare it anywhere? I want it to be called just by somerandom.js file and not by other file. — addicted
– addicted, Commented Sep 8, 2017 at 6:47
When you globally declare a JS variable as in this example it will be accessible by all functions no matter how you include it, ie. your method (2) is no different than (1). — Selcuk
– Selcuk, Commented Sep 8, 2017 at 6:54

Andrea Tulimiero · Accepted Answer · 2017-09-13 08:45:17Z

2

When you use a <script> tag with a src= ... and a content in it the behavior is undefined, and is strongly related to the browser you're using: for instance with chrome the script is loaded from src=... and the content of the <script> is ignored
However the usage it's strongly discouraged

edited Sep 13, 2017 at 8:45

answered Sep 8, 2017 at 15:55

Andrea Tulimiero

18.7k5 gold badges23 silver badges29 bronze badges

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

Comments

Kewal Shah · Accepted Answer · 2019-03-27 19:23:10Z

2

Enclosing the Django variable in double quotes worked for me. Then you invoke the .js file after the variable declaration.

<script>
    var variable = "{{ my_var }}";
</script>
<script type="text/javascript" src="{% static ... %}"></script>

This is because console.log({{ my_var }}) does not print the variable to the console but console.log("{{ my_var }}") does print it.

edited Mar 27, 2019 at 19:23

Kewal Shah

1,28019 silver badges30 bronze badges

answered Jul 19, 2018 at 8:47

tombishop83

1,9872 gold badges12 silver badges12 bronze badges

Collectives™ on Stack Overflow

Django - passing variable to javascript file within same script tag

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related