Django's template tag inside javascript

Question

My app's urls.py is:

from django.urls import path
from . import views

app_name = 'javascript'
urlpatterns = [
    path('create_table', views.create_table, name='create_table')

My views.py is:

def create_table(request):
    row_data = "this is row data"
    context = {'row_data': row_data}
    return render(request, 'javascript/create_table.html', context)

My create_table.html is:

{% load static %}
<button id="create_table">Get data</button>
<div id="place_for_table"></div></div>
<script src="{% static 'javascript/scripts/create_table.js' %}"></script>

And my create_table.js is:

function create_table() {
    document.getElementById("place_for_table").innerHTML = '{{ row_data }}';
}

document.getElementById("create_table").onclick = function() {
    create_table()
}

What I am trying to do is to run the create_table.js script on the click of the create_table button which should display "this is row data" text in place for table div element.

However, what gets diplayed is just {{ row_data )).

I have read other similar questions on using Django's variables inside Javascript but as per my understanding they all suggest to do the way I did it, so I am not sure what I am doing wrong.

Selma

Answer 1

If you've got an element in your template which you're getting to then detect clicks, why not just do it the other way around where you can then pass the context variable to your JS function?

<button onclick="create_table({{ row_data }})">Click me</button>

By doing that you can inspect the page to see if the data is going to be passed correctly. You'll probably have to pass the data through a filter like escapejs or safe.

Alternatively you could do something like

{% load static %}

<button id="create_table">Get data</button>
<div id="place_for_table"></div></div>

<script type="text/javascript">
    var row_data = "{{ row_data }}";
</script>
<script src="{% static 'javascript/scripts/create_table.js' %}">
</script>

The issue with this approach is the scope of variables as you may not want to declare things globally so it could be considered an easy approach, but not necessarily the best solution.

Arrington

Thanks Mark, I have tried your alternative approach and it works great. I am having some trouble with the first approach however. What gets displayed is 'undefined' as if the onclick ="create_table({{ row_data }})" didn't pass the paramater to the function correctly (I have also altered the create_table function in the script to accept parameters)? Does the script need to be included in the template or can it stay in a separate file? – Selma

This is a good answer, just keep in mind that in the alternative approach row_data is in global scope which might be more error-prone as code gets more complicated and additional variables are introduced. – Posset

@Selma I've updated my answer a little to give some more info on template filters etc. bonidjukic is correct though - consider the scope of variables with javascript. You might not want to declare things globally. – Arrington

Answer 2

When you write {{ row_data }}, you're using a Django-specific "language" called Django template language which means that the mentioned syntax can only be "understood" by Django templates.

What you're doing here is loading a separate JavaScript file in which the Django template syntax simply won't work because when browser comes to the point to evaluate that file, {{ row_data }} will look just another string literal, and not what you would expect to.

It should work if you inline your JavaScript example directly into the Django template.

Alternatively you could somehow "bootstrap" the external JavaScript file with the data available in the Django template, here's how I would go about doing that:

create_table.html

<script src="{% static 'javascript/scripts/create_table.js' %}"></script>
<script type="text/javascript">
$(function() {
  var create_table = Object.create(create_table_module);
  create_table.init({
    row_data: '{{ row_data }}',
    ...
  });
});
</script>

Note: wrapping the above code in the jQuery's .ready() function is optional, but if you're already using jQuery in your app, it's a simple way to make sure the DOM is safe to manipulate after the initial page load.

create_table.js

var create_table_module = (function($) {
  var Module = {
    init: function(opts) {
      // you have access to the object passed
      // to the `init` function from Django template
      console.log(opts.row_data)
    },
  };

  return Module;
})(jQuery);

Note: passing jQuery instance to the module is optional, it's just here as an example to show how you can pass an external dependancy to the module.

Posset

Hmm, that's too bad, I thought that with this approach I would be able to create a whole HTML table without reloading the page and populate it with data scraped from web by Django view function. Having to write all the HTML for such table in Django's template would be clumsy. Is AJAX the only way to go in such case? – Selma

I've updated the answer with a more specific example, hope it helps. – Posset

Answer 3

What I did was to include the javascript/jquery inside {% block scripts %} and use the the Django specific data as follows:

`

 $.ajax({
   type:"GET",
   url: "/reserve/run/?ip={{ row_data }}",
   dataType: "html",
   async: true,
   }).done(function(response) {
     $("#Progress").hide();
     $('#clickid').attr('href','javascript:ClearFlag()');
     var win = window.open("", "MsgWindow");
     win.document.write(response);
   }); 

`

Bearce

Answer 4

I've found a solution to avoid the extra typing of all the previous answers.

It's a bit hacky:

Just transform you myjavascriptfile.js into myjavascriptfile.js.html and wrap the code in a <script>...</script> tag. Than include them instead of linking them in your template file.

myTemplate.html

    ....
    {% block js_footer %}
    {% include "my_app/myjavascriptfile.js.html" %}
    {% endblock js_footer %}

myjavascriptfile.js.html

<script type="text/javascript">
    console.log('the time now is {% now "Y m d H:i:s" %}');
    ...
</script>

Mills

Answer 5

instead of writing the function in a separated js file, write it in script tags within your html page, so it can use the django template language

Dappled

Answer 6

You can use Django template tags and filters in <script></script>.

For example, you can pass Hello to with tag's dj_val and upper filter in <script></script> in index.html, then Hello and HELLO was displayed on console as shown below:

{% "index.html" %}

<script>
{% with dj_val="Hello" %}
    console.log("{{ dj_val }}") # Hello
{% endwith %}

console.log("{{ "Hello"|upper }}") # HELLO
</script>

Be careful, you cannot pass JavaScript's js_val set Hello to with tag's dj_val and upper filter in <script></script> in index.html, then nothing was displayed on console as shown below:

{% "index.html" %}

<script>
let js_val = "Hello"

{% with dj_val=js_val %}
    console.log("{{ dj_val }}") # Nothing
{% endwith %}

console.log("{{ js_val|upper }}") # Nothing
</script>

Chrysostom