Search code examples
javascriptpythonhtmlflaskjinja2

"jinja2.exceptions.TemplateNotFound" error when attempting to access JavaScript file

I'm trying to pass an array into a javascript file (taskTableDip.js) to later create a table in a HTML file (supportDash.html), however for some reason Flask keeps throwing jinja2.exceptions.TemplateNotFound: {{ url_for('js', filename='taskTableDip.js') }}. Weirdly I noticed that this line seems to differ from the one that appears in the code, I'm unsure whether this has something to do with jinja, and if I've named the file wrong.

WebManager_main.py

from flask import Flask, render_template, url_for
#this is the library responsible for the hosting of the Web app
from werkzeug.middleware.proxy_fix import ProxyFix
import DataBaseHandler_Main as DBHM


app = Flask(__name__)
app.config["SECRET_KEY"] = "thisistotallysecret"
app.wsgi_app = ProxyFix(app.wsgi_app)

@app.route("/")
def login():
  return render_template("login.html")
  #this is the login site where the user will initiall be diurected to

@app.route("/supportdash")
def supportDash():
  tasks = DBHM.fetch("1.0", None)
  return render_template("supportDash.html", tableData = tasks)



#if __name__ == "WebManager_main":
#  app.run(port=8080, debug = True)

templates/base.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/main.css') }}" />
    {% block head %}{% endblock %}
  </head>
  <body>
    {% block main %}{% endblock %}
  </body>
</html>
<!--   this is th basic template for the different html files   -->

templates/supportDash.html

{% extends "base.html" %}

<!--{% include "{{ url_for('js', filename='taskTableDip.js') }}" %}-->
<!-- This is to fix the issue with passing values to the js file -->

{% block head %}
<title>Siteswift - Support Team DashBoard</title>
<!--script type = "text/javascript" src = ""></script-->
<script type="text/javascript" src="{{ url_for('static', filename='js/taskTableDip.js') }}"></script>
<script type="text/javascript">
    var taskData = dataReturn({{tableData|tojson}})
 </script>
{% endblock %}

{% block main %}
 <table>
   <h1>Support Team Portal</h1>
  <tr>
    <th>Task</th>
    <th>User</th>
    <th>Priority</th>
    <th>Deadline</th>
    <th colspan = 3>Actions</th>
  </tr>
   <tbody id="taskTable"></tbody>
 </table>
{% endblock %}

static/js/taskTableDip.js

var tableData = {}

function dataReturn(vars) {
  return vars
}
function createTable() {
  var table =
  for (var i in tableData){
    var row = `<tr>
      <td>${tablData[i][0]}.Task</td>
      <td>${tablData[i][1]}.User</td>
      <td>${tablData[i][3]}.Priority</td>
      <td>${tablData[i][4]}.Deadline</td>
      <td><a href="{{ url_for('templates',filename='editTask.html')}}">Edit</a>.Actions</td>
      <td>.Actions</td>
      <td>.Actions</td>
    </tr>`
    
  }
}

The file structure:

enter image description here

I've tried moving the file out of the static folder. In addition to shutting down and re-running the code, as well as deleting the packager files to reinstall Flask, in the hopes it will update the file it's running if it's stuck on an old one. (I was sort of pulling at loose ends as I didn't know why the error code looked different)

I'd greatly appreciate any help whatsoever!

Solution

  • You commented out the line named in the error message using <!-- ... -->. However, this does not prevent jinja from attempting to render the line, since jinja expects {# ... #} to mark a comment.

    An include command would only be used to integrate an external template and not to refer to a JavaScript file.

    Furthermore, you use a jinja expression within your JavaScript file.
    Jinja, unlike JavaScipt, runs on the server side. Since you are using the url_for command outside the environment, it will not be rendered and will appear inside the href attribute. Jinja commands are only valid within template files and the respective endpoint.

    Unfortunately, specifying a template within the url_for command is also not valid. You can only refer to existing endpoints using their identifier.