Loading data from json in Flask app - javascript

I have a Flask app with the following structure:
/
static
script.js
data.json
templates
index.html
app.py
app.py renders the index.html template which includes the js as <script type="text/javascript" src="/static/script.js">.
The javascript file simply loads the json file using the path "data.json" as it is in the same directory. However, this always gives me a 404 not found error on the "data.json" file coming from the javascript. I was wondering if there is a correct way to access files from javascript when launched through Flask.
Thanks!

You should get static file in this way:
{{ url_for('static', filename='script.js') }}
See the documentation for more detail.
In script.js, you may need to load the data.json by /static/data.json.

Related

index.html is not accessing app.js nor data.js after it is relocated to a subfolder 'templates'

I have a working static web page where the index.html successfully reads the style from css/style.css, the data from js/data.js and the logic from js/app.js. Here are the exact code inside index.html:
for the style: link href="static/css/style.css
for the data: script src="static/js/data.js
for the logic: script src="static/js/app.js
The problem is that when I run a Flask python app to simply load the index.html, I had to move the index.html inside a new folder call 'templates'. When I do that the web page loads, and even the style is loaded, even though I did not change the route for the css/style.css. However, the index.html does not access the data.js nor the app.js. I know I have to modify the routes' syntax in the codes I shared above, but I cannot determine what the route is. I have tried starting with 'frontend3/...' but it did not work.
frontend2 file/folder structure where index.html fetched data.js and app.js. There is no app.py flask application. The index.html reads data.js and app.js.
frontend3 file/folder structure where index.html does not fetch data.js and app.js. There is a flask app (app.py), which the convention requires me to place index.html inside 'templates' folder.
I know I missing something simple. Please help. Thank you.
Those links are relative, and need to be absolute. The simple way to do that is to prefix the paths with '/'. E.g.,
href="/static/css/style.css"
The Flask way is to use url_for in your templates
href="{{ url_for('static', filename='css/style.css') }}"
Either will work.

adding.js file in ejs file

I'm working on a simple project where I included a simple js file to fetch out a data from api on click of a button. It was working when I had HTML file and js file in same folder and used by simply clicking on index.html . Now i am using expressjs for same and written all the HTML code in index.ejs file. For some reason, the js file has stopped working. I have tried changing the paths and carefully defining the path, also kept the file in same folder as of ejs file but it does not seem to work. Any suggestions would be helpful. The lines I have included in ejs file as are as follows. Here the js file is in the js folder of public folder of the project
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
I got this problem resolved by adding the following path to jQuery src
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
instead of
"jquery-3.2.1.min.js"

Javascript file not found using relative path during Flask render_template [duplicate]

This question already has answers here:
Link to Flask static files with url_for
(2 answers)
How to serve static files in Flask
(24 answers)
Closed 5 years ago.
I'm using Python and Flask to build a simple interaction web app.
Testing on localhost:5000 using Chrome.
I have one template and one associated javascript file located at:
./templates/main.html
./templates/main_scripts.js
The main.html template includes the scripts file like this:
<script src="main_scripts.js"></script>
When I render the template using this Python code...
return render_template('main.html', session_id=session_id, title=sess.title)
The main.html page is rendered, but I get this error in the Chrome console:
Failed to load resource: the server responded with a status of 404 (NOT FOUND)
Using the Chrome console to inspect the location of the unfound 'main_scripts.js' when the error occurs, the browser thinks it is trying to load it from inside my virtual environment at:
./env/Scripts/main_scripts.js
...and not from the same directory as the template.
I can't seem to force the rendered template to understand where it's script file is located. So far I have tried src paths like "./main_scripts.js" and even "/appdir/main_scripts.js" with the exact same results.
You first need to create a static folder at the same level as the templates folder. Then create a js subfolder and put the js file in that folder. Now you can call it in your html.
Here's the "pythonic" way do that:
<script src="{{ url_for('static', filename='js/main_scripts.js') }}"></script>
As explained here in the official Flask documentation, your project structure should look like this:
/yourapplication
yourapplication.py
/static
/css
style.css
/js
main_scripts.js
/templates
main.html
...

flask javascript not found in html file

I have a basic flask folder hierarchy. I have a templets folder which holds all my HTML files, and a static folder for my javascript files. I have a javascript that builds a table. I have run this script from my html file directly by placing the script tag in the HTML file, and it works. I want to move it out of the HTML file and place it in the static folder. When I do that and try to source the file I get the error that the script is not found.
I have tried two different ways to do this and the file is still not getting found. What am i doing wrong here?
<script src="{{ url_for('static', filename='/static/table.js') }}"></script>
<script src="../static/table.js"></script>
here is the exact error I get for both of these
Failed to load resource: the server responded with a status of 404 (NOT FOUND)
If you haven't already, you need to set up routes to send the files that the webpage requests from your flask server, you can use send_from_directory to let requests get any files from a specified directory, in your case, the folder containing your javascript.
#app.route('/js/<path:path>')
def send_js(path): return send_from_directory('js', path)

cant load external js file in html

I have tried all answers available but none can solve my problem. I have a html page in which I am drawing svg using js. now I want to store this js in external file and call it (my html and js files are in same folder).
<script src="show1.js"></script> on doing so, my internal js cannot find functions defined in external js and gives 'ReferenceError: DrawLine is not defined'. I even tried using alert in external js to check whether it was being loaded or not, but even alert is not working. is there any settings that i will have to check? kindly help.
My code is really huge. I am posting this snippet instead that shows the internal and external js.
<head>
<script>
//only variables are declared
<script>
</head>
<body>
<script src="show1.js"></script>
<script> drawline(10,10,20,20,'black',4); </script>
</body>
show1.js:
function drawline(x1,y1,x2,y2,c,w)
{
//do stuff
}
Note:these pages are part of django project, and so my html and js are stored in the template folder of the project.
you can use the static file app in django to serve external static files: https://docs.djangoproject.com/en/1.10/ref/contrib/staticfiles/
You can create a folder on you project to host your static assets (with the name static for example), then you need to configure your project to serve static files in the settings
STATIC_ROOT = 'path to your folder/static/'
STATIC_URL = '/static/'
then in your template:
{% load staticfiles %}
<head>
<script>
//only variables are declared
<script>
</head>
<body>
<script src="{% static 'show1.js' %}"></script>
<script> drawline(10,10,20,20,'black',4); </script>
</body>
in development mode, the runserver command will serve your static files. you may want to serve the files directly from the web server in production mode. also settings may vary depending on the django version, you can refer to the documentation of your version for further details.

Categories

Resources