1

For context here, I am experienced with JavaScript but new to Django.

Goal: Log the contents of a Django context variable in the browser's console using JavaScript. Specifically I'd like to log the contents of context in the Django render method I write below.

In script.js I have console.log("hey", foo) which I expect to output the contents of a variable I pass into the Django render method. It gives me an error: Uncaught ReferenceError: foo is not defined

I found two StackOverflow threads that seem to answer my question re: how to do this correctly. Neither worked.

In (1) How can I pass my context variables to a javascript file in Django?, the answer from user Brian Neal claims I can deliver the Django variable into a javascript script at the top of the html file Django uses to render the page. Here is how I tried his answer:

Django's render method says...

def page(request):
    bar = "a"
    doohickey = "b"
    context = {'foo': bar,'baz': doohickey}
    return render(request, 'myPage.html',context=context)

Then in myPage.html I say:

{% load static %}
{% block js %}
    <script>var foo = {{ foo|safe }}; console.log("aliens");</script>
    <script src="{% static 'js/script.js' %}" type="text/javascript" defer></script>
{% endblock %}

And script.js says console.log("hey", foo)

But I get the error message written above.

In (2), How to use the context variables passed from Django in javascript?, a similar problem is presented and answered. The ticked answer from user xyres says the same process will (seemingly) work for me.

Both threads say to use double {{ }} tags to pass the django variable to a JavaScript script.

However, I am clearly doing something wrong in myPage.html, because "aliens" does not print to the console. I've been through 8 threads and none of them tell me what to do.

I also found a blog Safely Including Data for JavaScript in a Django Template which claims using the answers I linked to on StackOverflow would create an opportunity for hackers. So I don't want that.

I also found an Edureka page with an answer to the same question I have and did this in myPage.html -- note the tag is now outside of the {% block js %} part:

{% extends "base.html" %}
{% load static %}
<script>var foo = {{ foo|safe }}; console.log("aliens");</script>
{% block js %}
    <script>var foo = {{ foo|safe }}; console.log("aliens");</script>
    <script src="{% static 'js/script.js' %}" type="text/javascript" defer></script>
{% endblock %}
{% block body %}

No change though.

Another update:

When I write context = {"magic": "wizard"} and pass that to the frontend, <script>console.log("aliens"); var something = {{ magic }}; console.log(something);</script> gives me an error, Uncaught SyntaxError: Unexpected token '&'. Upon investigation, I'm closer than I've ever been to making it work. The code is embedded with bugs: var something = &quot;wizard&quot;;

Roly Poly
  • 489
  • 1
  • 9
  • 19
  • And what your rendered page looks like? Has the variable foo been inserted in the code? – Branko Radojevic Sep 13 '20 at 16:01
  • The rendered page has html. What part of the rendered page would help answer the question? I can't really post it, it's too long. And, "foo" doesn't make it from the ```context``` variable to the ```script.js``` file where it is supposed to be logged to the console. The real contents of "foo" will eventually be inserted into the page. – Roly Poly Sep 13 '20 at 16:05
  • Well, the source html part with the – Branko Radojevic Sep 13 '20 at 16:43
  • Does this answer your question? [How to use the context variables passed from Django in javascript?](https://stackoverflow.com/questions/43305020/how-to-use-the-context-variables-passed-from-django-in-javascript) – Jaydeep Sep 13 '20 at 18:30

1 Answers1

0

if the django variable is a string, quotes are needed. so it would be like:

var foo = "{{foo}}";
Jaydeep
  • 775
  • 2
  • 8
  • 14