Python Flask not displaying Javascript [duplicate]

This question already has an answer here:

Why use `url_for`?

1 answer

Link to Flask static files with url_for

2 answers

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

edited Nov 21 '18 at 18:44

asked Nov 21 '18 at 18:23

SpencerWF

marked as duplicate by davidism flask
Users with the flask badge can single-handedly close flask questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 '18 at 4:38

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

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

|
show 1 more comment

This question already has an answer here:

Why use `url_for`?

1 answer

Link to Flask static files with url_for

2 answers

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

edited Nov 21 '18 at 18:44

asked Nov 21 '18 at 18:23

SpencerWF

marked as duplicate by davidism flask
Users with the flask badge can single-handedly close flask questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 '18 at 4:38

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

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

|
show 1 more comment

This question already has an answer here:

Why use `url_for`?

1 answer

Link to Flask static files with url_for

2 answers

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

edited Nov 21 '18 at 18:44

asked Nov 21 '18 at 18:23

SpencerWF

This question already has an answer here:

Why use `url_for`?

1 answer

Link to Flask static files with url_for

2 answers

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

This question already has an answer here:

Why use `url_for`?

1 answer

Link to Flask static files with url_for

2 answers

javascript python flask

edited Nov 21 '18 at 18:44

asked Nov 21 '18 at 18:23

SpencerWF

edited Nov 21 '18 at 18:44

asked Nov 21 '18 at 18:23

SpencerWF

edited Nov 21 '18 at 18:44

asked Nov 21 '18 at 18:23

SpencerWF

asked Nov 21 '18 at 18:23

SpencerWF

asked Nov 21 '18 at 18:23

SpencerWF

marked as duplicate by davidism flask
Users with the flask badge can single-handedly close flask questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 '18 at 4:38

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

marked as duplicate by davidism flask
Users with the flask badge can single-handedly close flask questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 '18 at 4:38

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

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

|
show 1 more comment

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

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

|
show 1 more comment

1 Answer
1

active

oldest

votes

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.

answered Nov 21 '18 at 19:07

SpencerWF

add a comment |

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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.

answered Nov 21 '18 at 19:07

SpencerWF

add a comment |

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.

answered Nov 21 '18 at 19:07

SpencerWF

add a comment |

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.

answered Nov 21 '18 at 19:07

SpencerWF

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.

answered Nov 21 '18 at 19:07

SpencerWF

answered Nov 21 '18 at 19:07

SpencerWF

answered Nov 21 '18 at 19:07

SpencerWF

answered Nov 21 '18 at 19:07

SpencerWF

add a comment |

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu