Mixing
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
javascript python flask
asked Nov 21 '18 at 18:23
SpencerWFSpencerWF
11
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.
|
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
javascript python flask
asked Nov 21 '18 at 18:23
SpencerWFSpencerWF
11
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 yourbase.htmlaren'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
javascript python flask
asked Nov 21 '18 at 18:23
SpencerWFSpencerWF
11
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
javascript python flask
asked Nov 21 '18 at 18:23
SpencerWFSpencerWF
11
asked Nov 21 '18 at 18:23
SpencerWFSpencerWF
11
edited Nov 21 '18 at 18:44
SpencerWF
asked Nov 21 '18 at 18:23
SpencerWFSpencerWF
11
asked Nov 21 '18 at 18:23
SpencerWFSpencerWF
11
asked Nov 21 '18 at 18:23
SpencerWFSpencerWF
11
11
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 yourbase.htmlaren'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 yourbase.htmlaren'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
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
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
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
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
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
SpencerWFSpencerWF
11
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
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
SpencerWFSpencerWF
11
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
SpencerWFSpencerWF
11
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
SpencerWFSpencerWF
11
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
SpencerWFSpencerWF
11
answered Nov 21 '18 at 19:07
SpencerWFSpencerWF
11
answered Nov 21 '18 at 19:07
SpencerWFSpencerWF
11
answered Nov 21 '18 at 19:07
SpencerWFSpencerWF
11
11
add a comment |
add a 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.htmlaren'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