Django : static files are not loaded - javascript

i'm trying to test the code mentionned in this page :
dynamic-formset.js
and i added :
<script src="{% static 'js/dynamic-formset.js' %}"></script>
<script src="{% static 'js/jquery-3.3.1.js' %}"></script>
in order to load static files that contains js.
howerver the js doesn't work and i'm getting in the console the following lines :
"GET /static/js/dynamic-formset.js HTTP/1.1" 404 1777
"GET /static/js/jquery-3.3.1.js HTTP/1.1" 404 1768
when i replace the second ligne that imports jquery with the https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js , i dont get :
"GET /static/js/jquery-3.3.1.js HTTP/1.1" 404 1768
i only get "GET /static/js/dynamic-formset.js HTTP/1.1" 404 1777
do you have any idea why it doesn't work ? i guess that the static files are not loading.
Any help please ? Thank You

If you are using django 2.x.x make sure your static files are in a sub folder inside the static folder that corresponds to your app name.
See Other question

Related

Django problems loading static files

I am trying to add external JS file to my Django project. Unfortunately it doesn't work while I am trying to add it in many ways:
In my template.html I have specified direct path:
{% load static %}
< script> src="{% static 'commerce/static/js/test.js' %}" < /script>
it doesn't work.
My settings.py file:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(file)))
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
my layout.hmtl:
{% load static %}
<script src="{% static 'js/test.js' %}"></script>
Depending on sources combination, I receive various output in terminal regarding status of loaded files:
"GET / HTTP/1.1" 200 5167
"GET /static/js/test.js HTTP/1.1" 304 0
"GET / HTTP/1.1" 200 5167
"GET /static/js/test.js HTTP/1.1" 200 0
"GET / HTTP/1.1" 200 5167
"GET /static/js/test.js HTTP/1.1" 404 0
Even if my 'test.js' is loaded correctly (HTTP status 200 or sometimes no information regarding test.js load status), my javascript functions doesn't work.
In order to check if other static files are loaded I even tried to remove my CSS file from static folder and surprisingly (or not), after re-running my app it is still formatted. Although I left source for CSS unchanged in my layout.html:
{% load static %}
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
Summarizing:
I cannot manage to add external *.js file to my Django app,
Even if source of *.js file is correct and Django loads it, javascript functions doesn't work
While I remove my *.css file from the source path, my Django app is still correctly formatted (?!)
I keep one more copy of the same app on my disk but in separate directory
Can you please point where am I mistaken? I am running out of ideas now.

How to load local JavaScript libraries in Github Pages?

I recently deployed my website to GitHub Pages - https://max-stevenson.github.io/my-year-in-books/
I have a two local JavaScript libraries (jQuery and swiped-events) downloaded and within the following directory: src/public/js/lib.
In my index.html file at the root directory, I am linking to the two libraries like so:
<script type="text/javascript" src="/src/public/js/lib/jquery-3.4.1.min.js"></script>
<script src="/src/public/js/lib/swiped-events.js"></script>
But when I access the page on GitHub Pages I get the following errors:
GET https://max-stevenson.github.io/src/public/js/lib/jquery-3.4.1.min.js net::ERR_ABORTED 404 (Not Found)
GET https://max-stevenson.github.io/src/public/js/lib/swiped-events.js net::ERR_ABORTED 404 (Not Found)
When I run a local instance on my machine via a node express server and visit the site at localhost:3000, everything works great.
Can anyone please advise me where I'm going wrong and how to correctly reference my scripts so that they are loaded in GitHub Pages?
Try:
<script type="text/javascript" src="/my-year-in-books/scr/js/lib/jquery-3.4.1.min.js"></script
Or:
<script type="text/javascript" src="./scr/public/js/lib/jquery-3.4.1.min.js"></script

Leaflet map not appearing when sourcing leaflet.js and leaflet.css from directory with Flask

The code below tries to read in my leaflet.js and leaflet.css files which are stored in static/leaflet/package/dist/
The static folder is in the same directory as my flask app.py code. Templates are in a templates folder. The below code is from my home.html template.
For some reason if I use a url source for my leaflet.js and leaflet.css codes, the map works perfectly. Once I try to source my scripts from a directory, my map breaks. I think it is because I am not properly integrating my url_for. It may be also further messed up because I am using template inheritance.
Thanks in advance for any help!!
{% extends "base.html" %}
{% block header %}
<link rel="stylesheet" href="{{url_for('static', filename='leaflet/package/dist/leaflet.css')}}">
<script src="{{url_for('static', filename='leafleat/package/dist/leaflet.js')}}"></script>
<style>
#map{ width: 100%; height: 100%; }
</style>
{% endblock %}
edit:
These are the HTTP status codes I get back from my server. Which make it look like the only thing not being obtained is my leaflet.js script.
127.0.0.1 - - [04/Oct/2019 16:17:01] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [04/Oct/2019 16:17:01] "GET /static/leaflet/package/dist/leaflet.css HTTP/1.1" 200 -
127.0.0.1 - - [04/Oct/2019 16:17:01] "GET /static/leafleat/package/dist/leaflet.js HTTP/1.1" 404 -
127.0.0.1 - - [04/Oct/2019 16:17:01] "GET /static/favicon.ico HTTP/1.1" 200 -
Fixed it. I misspelled leaflet in the leaflet.js line. Leaving this up in case anyone needs help with leaflet and flask at any point.

Phoenix Js and Audio files adding

I am new in elixir development. I have couple sounds and js files which I add to my assets folder. When I am trying to access them I got an error
GET http://127.0.0.1:4000/js/calls.js 404 (Not Found)
call:1 GET http://127.0.0.1:4000/sounds/ringtone.wav
call:1 GET http://127.0.0.1:4000/sounds/ringbacktone.wav 404 (Not Found)
call:1 GET http://127.0.0.1:4000/assets/sounds/dtmf.wav 404 (Not Found)
call:1 GET http://127.0.0.1:4000/assets/sounds/ringtone.wav 404 (Not Found)
call:1 GET http://127.0.0.1:4000/assets/sounds/ringbacktone.wav 404 (Not Found)
call:1 GET http://127.0.0.1:4000/sounds/dtmf.wav 404 (Not Found)
But the sound files already in assets folder and conn.js also in js folder. This is sample code how can I connected call.js to html
<script src="<%= static_path(#conn, "/js/call.js") %>"></script>
From the book which I read I understood that if I want to make task management in phoenix for creating app.js I should need to use brunch. But in my situation I want to use javascript and sound files as seperate without task manager. My first question how can I access to javascript and sound files in phoenix? My second question as you can from the error list above it tryed to access to twice dtmf.wav file and other files. But inside of the html code I wrote this in one place why it tried to check this in two folders?
call:1 GET http://127.0.0.1:4000/assets/sounds/dtmf.wav 404 (Not Found)
call:1 GET http://127.0.0.1:4000/sounds/dtmf.wav 404 (Not Found)
In your endpoint.ex file, i believe you need to add the folder of your sounds.
lib -> AppName -> endpoint.ex
plug Plug.Static,
at: "/", from: :heaped, gzip: false,
only: ~w(css fonts images sounds js favicon.ico robots.txt)
If sounds is the name of the folder. :-)

EpicEditor: themes not found

I have a static directory that contains subdirectories to css/, js/, fonts/ and images/. After downloading EpicEditor, I placed epiceditor.min.js in the js/ directory, and had this line in my HTML:
<script type="text/javascript" src="/static/js/epiceditor.min.js"></script>
but this gives an error:
GET http://0.0.0.0:6543/static/js/epiceditor.min.js/themes/base/epiceditor.css 404 (Not Found)
If I instead use a separate directory for EpicEditor:
<script type="text/javascript" src="/epiceditor/js/epiceditor.min.js"></script>
this is the error that I get:
GET http://0.0.0.0:6543/epiceditor/js/epiceditor.min.js 404 (Not Found)
How can I change the href to point towards the correct location? Or, where am I supposed to place the various files for EpicEditor?
I realised what I had been doing wrong: the basePath option should have a filepath that leads to the themes for EpicEditor.

Categories

Resources