Not able to move my JavaScript snippet to external file using Flask
Question
I'm following this tutorial but I'm having trouble getting the JavaScript example to work.
I tried this code from W3Schools and it works. But when I move the code to an external file, it stops working. I see no warnings or errors in the Flask terminal or Chrome's console.
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/demo')
def demo():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha384-TlQc6091kl7Au04dPgLW7WK3iey+qO8dAi/LdwxaGBbszLxnizZ4xjPyNrEf+aQt"
crossorigin="anonymous"></script>
<!-- script>
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
}); // END .ready event.
</script -->
<script src="static/js/script.js"></script>
<!-- script src="{{ url_for('static', filename='js/script.js') }}"></script -->
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
script.js :
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
}); // END .ready event.
1 answers
solution1
2 ACCPTED
This code solved things for me. Turns out that this syntax <script type="text/javascript" src="myFile.js"> is necessary for Flask external file JavaScript to work in Chrome. While <script src="myFile.js"> only worked for me in Firefox.
Also I had a bunch of commented out horizontal HTML rulers in my original code. That might have interfered with some commented out and disabled script tags that I left for experimentation and evidence purposes. <script> only tag had an overflowing behavior that interfered with previously disabled and commented out script tags such as <script></script> .
I cleaned them out perhaps they were part of the conflicting issue, perhaps they weren't, I don't know for sure.
Also don't forget to pause Ghostery extension addon in your Chrome web browser when debugging JavaScript code in console mode. It can create extra errors beyond your control.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha384-TlQc6091kl7Au04dPgLW7WK3iey+qO8dAi/LdwxaGBbszLxnizZ4xjPyNrEf+aQt"
crossorigin="anonymous"></script>
<!-- script src="../static/js/script.js" -->
<script type="text/javascript" src="{{ url_for('static', filename='js/script.js') }}"></script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
<p onclick="$(this).hide();">Inline JavaScripting.</p>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.