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.

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.