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.

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.

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