0

I'm trying to display a javascript file in a python flask project. I'm using blocks in the html file which is calling the javascript file. It is just not displaying on the webpage.

If I remove the base.html part of the project and just put everything into the snake.html file it runs fine, which says to me the Javascript is fine, I'm just misunderstanding the Flask parts.

Any assistance you could give me, would be greatly appreciated.

base.html

<html>
  <head>
    {% if title %}
    <title>{{ title }}</title>
    {% else %}
    <title>Unseen Arcade</title>
    {% endif %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> body {padding: 10; margin: 10;} </style>
    <script src="p5.min.js"></script>
    <script src="addons/p5.dom.min.js"></script>
    <script src="addons/p5.sound.min.js"></script>
    {% block scripts %}{% endblock scripts %}
  </head>
  <body>
    <div>Unseen Arcade: <a href="/index">Home</a></div>
    <hr>
    {% block content %}{% endblock content %}
  </body>
</html>

snake.html

{% extends "base.html" %}
{% block scripts %}
  <script src="{{url_for('static', filename='snake/snake.js')}}"></script>
{% endblock %}

{% block content %}
  <body>
    <h2> Snake Game:</h2>
    <p>Use the keys W, A, S, and D to control the direction of the snake, if you get onto the leaderboard with a score above 50 you will receive a hint on the locations of other secret arcades in London.$
  </body>
{% endblock %}

folder layout:

FlaskApp/
FlaskApp/
    forms.py
    __init__.py
    routes.py
    static/
      p5.min.js
      addons/
        p5.dom.min.js
        p5.sound.min.js
      snake/
        snake.js
    templates/
        base.html
      snake/
        snake.html
  flaskapp.wsgi
SpencerWF
  • 1
  • 1
  • Are you receiving any errors in the JS console? – kstullich Nov 21 '18 at 18:33
  • Some of the files you have in your `base.html` aren't in your specified folder layout – pmkro Nov 21 '18 at 18:35
  • Sorry, I edited it to include those files, they are in there, just didn't think to check. I'm also referencing them without url_for, that's not an issue right? – SpencerWF Nov 21 '18 at 18:45
  • I'm sshing into a rapsberry pi hosting this, so I don't really have a js console for it. – SpencerWF Nov 21 '18 at 18:47
  • How are you viewing the webpage? If inside a browser you should be able to view the JS console.... – kstullich Nov 21 '18 at 18:49
  • Oh, such an obvious thing and I was too dumb to think of it. This is what I get for branching from my area. Thank you so much Kstullich. I'll post an answer pointing out that I merely used url_for inside base.html and it solved it. – SpencerWF Nov 21 '18 at 19:02

1 Answers1

0

Thanks to Kstullich I found out that the path I was using in base.html was incorrect, and swapped the script paths to use url_for. Also didn't think about viewing the js console in the browser.

SpencerWF
  • 1
  • 1