[Fixed]-Django's template tag inside javascript

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.

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);
   }); 

`

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>

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

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>