0

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.

addicted
  • 2,901
  • 3
  • 28
  • 49
  • what does not work? can you give us an error string, or some stack trace? What is the "error" you see? – jperelli Sep 08 '17 at 02:56
  • I added the error message I see. Basically it says "variable is not defined". – addicted Sep 08 '17 at 03:00
  • 1
    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 Sep 08 '17 at 06: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 Sep 08 '17 at 06:47
  • Why don't you declare it before including your JS, as in your first (working) example? – Selcuk Sep 08 '17 at 06:48
  • I dont want it to be accidentally called by some other js file. – addicted Sep 08 '17 at 06:48
  • 1
    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 Sep 08 '17 at 06:54
  • Thanks for everybody helping. I will stick to the working method. Also according to answer by Andrea Tullimiero below, declaring in script tag for organization purpose has different behavior for each browser. – addicted Sep 11 '17 at 02:04

2 Answers2

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

Andrea Tulimiero
  • 17,693
  • 5
  • 21
  • 28
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.

Kewal Shah
  • 1,131
  • 18
  • 29
tombishop83
  • 1,837
  • 2
  • 12
  • 12