Import JS to HTML 404 - javascript

Could someone help me figure out why this import is not working? Even when I do script/import.js it will not work. I am getting this error message: 127.0.0.1 - - [09/Sep/2020 15:09:35] "GET /import.js HTTP/1.1" 404. Given the file structure in attached image... what am I missing :D

You want to access a file located on a folder who is located in the folder one level up from the current folder, so you should do this :
<script src="../script/import.js"></script>

I'm assuming that you are using Flask for your app, in which case you will need to serve your javascript files as 'static' files, see: https://flask.palletsprojects.com/en/1.1.x/tutorial/static/
Move your 'script' folder into a new folder called 'static', then change your script import to:
<script type="text/javascript" src="{{ url_for('static', filename='script/import.js') }}"></script>

Related

Laravel js file not found

I've my Laravel javascript file in public/js folder and it is referred like follows.
<script src="{{ asset('public/js/test.js') }}"></script>
But it is still not found 404.
You shouldn't need to include public in the URL. This should work fine;
<script src="{{ asset('/js/test.js') }}"></script>
What is ASSET_URL value? You can check it in the web developer tool in chrome or firefox. You can configure the asset URL host by setting the ASSET_URL variable in your .env file. This can be useful if you host your assets on an external service like Amazon S3 (https://laravel.com/docs/7.x/helpers#method-asset). For eg
// ASSET_URL=http://example.com/assets
asset('public/js/test.js') //http://example.com/assets/js/test.js
Usually your run your server document root as public folder. Hence, I am guessing that removing the public dir path will solve 404 file not found error i.e change to.
<script src="{{ asset('js/test.js') }}"></script>
Please use instead of as public folder is added Automatically by asset

ckeditor not loading in Flask application

So I'm using pycharm to build a simple web app. Trying to use ckeditor to make parts of certain forms customisable. first of all, here is the full directory structure
<Root>
-<app>
-<templates>
__init__.py
forms.py
models.py
routes.py
-<migrations>
-<static>
-<ckeditor>
{ckeditor directories bla etc bla}
ckeditor.js
app.db
config.py
application.py
In my base template I have the following code
{% block scripts %}
<script type="text/javascript" src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></script>
{% endblock %}
When I run the application the toolbar for ckeditor does not show. Strangely enough the CKEditorField from the form (which I am using th editor for) appears as a textarea and the relevant js appears above it when I inspect. However console logs a 404 error
GET http://127.0.0.1:5000/static/ckeditor/ckeditor.js 404 (NOT FOUND)
If I relocate the js file outside of its normal directory and place it directly in the templates directory of the app, after updating the correct path I get the following error
net::ERR_ABORTED
Thanks to Doobeh, the static directory was outside the application scope for some reason. Moved it under the app directory and now working

Loading data from json in Flask app

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.

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)

Laravel 5.2 - All CSS and JS files in public are empty

I run a local installation of xampp on which a laravel 5.2 app is running. I am trying to include css and js files from the public directory, but none of the content of these files is being loaded.
Laravel finds the files, they are just always empty.
I tried to clear the browser cache and the Laravel cache, but neither worked. I have referenced the files in the following ways:
<script type="text/javascript" src="{{ asset('js/all.js') }}"></script>
OR
<script type="text/javascript" src="/js/all.js"></script>
In both cases the files are loaded, but does not contain anything.
I have tried generating the files through elixir or simply putting them directly in the folder, but still the same result.
Any help is appreciated.
Try this
<script type="text/javascript" src="{{ url('js/all.js') }}"></script>
Try this,
<script type="text/javascript" src="{{ URL::asset('js/all.js') }}"></script>
Here your js directory should be in the laravel's app/public folder and URL::asset() will produce the necessary url for you.
You can refer How to include css and js in Laravel 5 for more info.
Okay, so I didn't exactly solve the issue, but I got around it. Just posting answer for future reference.
I set up a virtual host i xampp to get around the files loading from localhost, like in this example: https://www.codementor.io/php/tutorial/how-to-install-laravel-5-xampp-windows
Afterwards the js and css files load on all the different options presented above. Apparently it is something to do with the .htaccess file in the root, when running from the default folder in xampp.
Thanks for all the suggestions.
Have you tried this?
<script src="{{URL::asset('/js/jquery-1.10.2.min.js')}}"> </script>
Make sure that the 'js' folder is inside the 'public' folder of your project.

Categories

Resources