Bdtjtk

So for those of us who use Python and Django framework to develop a website, there is this awesome tool known as jinja which can be used as a template engine. For example:

Instead of hard-coding an import like this:

<script src="assets/js/onebutton.js"></script>

We can do this:

<script src="{% static 'assets/js/onebutton.js' %}"></script>

In this case, it automatically searches for a folder named static and goes inside to look for the needed code.

But why isn't it possible to use jinja template in Javascript.

For example:

homepage.html

<script src='whatever.js'></script>

<p>Another example</p>

<button id="clickme"> click me </button>

whatever.js

$(function()

{

$('#clickme').click(function(){

$.ajax({

                    headers : {'X-CSRFToken': getCookie('csrftoken')},

                    type: "POST",

                    url: '{% url "func" %}', //<--Problem arise here

                    datatype:"json",

                    data: {},

                    success: function(data){

                        var new_template = '<h1> %firstmsg% </h1>';

                        var new_frontend = new_template.replace('%firstmsg%',data.message);

                        console.log(new_frontend);

                        document.getElementById('wor').innerHTML+=new_frontend;

                    }

                });

}

}

Django would recognize the url in the AJAX request as /'{% url "func" %}' instead of /func

The only way to solve this is to move the entire code from whatever.js into the homepage.html in a <script></script> block.

Perhaps we need to import something for Jinja templating to work?

<script src="{% static 'assets/js/onebutton.js' %}"></script>

In this case, it automatically searches for a folder named static and goes inside to look for the needed code.

This is inaccurate. All it does is it converts the given path to the static path provided in your settings file like this - /static/asssets/js/onebutton.js. That is it. Django or Jinja2 doesn't go through the folder and look for the file. It doesn't even care if file exists or not.

Later, the browser automatically fetches this file from the server when it receives the html document.

Coming back to your original questions about why you can't use Jinja2 or Django template syntax in your JS files. Well, you can. But you'll have to render your JS files from your views.

Now, I'm sure you're using the render function to return a template from your views. But what does it do?

The render function converts the django specific template tags into proper html content.

So, if you're using django's or jinja's template syntax in your js files, you'll have to render your js files too. But that seems like a bad idea. Instead, you can create some global variables in your html files, and use them in your js files.

<!-- define required variables in template -->

<script>

    var URL = '{% url ... %}';

    var OTHER_VARIABLE = '{{ other_variable }}';

</script>

<!-- include your js files -->

<script src="/path/to/file.js"></script>