Why doesn't my html file get my javascript file. load static - javascript

here is my settings.py:
STATIC_DIR = os.path.join(BASE_DIR,'static')
STATIC_URL = '/static/'
STATICFILES_DIR = [STATIC_DIR]
here is the end of my html page:
{% load static %}
<script src="{% static '/js/script.js' %}" type="text/javascript"></script>
</html>
{% endblock %}
I have a folder static and inside it, there are two more folders one is js and the other is css. But when I try to load it, it always says "GET /static/js/script.js HTTP/1.1" 404 1795 I have tried many things but it does not work. Someone please help.

If it is development server (i.e DEBUG = True), then try this:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
'static',
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
If it is production server, then you simply remove the STATICFILES_DIR. The official documentation explains this more in depth.

Related

clusterize.js with django; static files not found

I am trying to use the https://clusterize.js.org/ javascript package with my Django website for displaying extremely large tables neatly and speedily. I downloaded the package's necessary js and css files, and referenced them in the html getting loaded when i visit my site's url: mysite.com/popularify
{% load static %}
{% block content %}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- uncommenting this line loading status files causes errors
<script src="{% static 'js/clusterize.min.js' %}"></script>
-->
<!-- I have a static/js/ folder -->
</head>
<body>
<div>
arthur russell = spotify:artist:3iJJD5v7oIFUevW4N5w5cj <br>
<!--HTML-->
<div class="clusterize">
<table>
<thead>
<tr>
<th>Headers</th>
</tr>
</thead>
</table>
<div id="scrollArea" class="clusterize-scroll">
<table>
<tbody id="contentArea" class="clusterize-content">
<tr class="clusterize-no-data">
<td>Loading data…</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
// clusterize JavaScript
var data = ['<tr>x</tr>', '<tr>z</tr>', '<tr>zxc</tr>'];
var clusterize = new Clusterize({
rows: data,
scrollId: 'scrollArea',
contentId: 'contentArea'
});
</script>
</body>
</html>
{% endblock content %}
And ensured that I have the two files in that location, when I try to access my site i am getting a 404 error only when I uncomment the line in my html file referencing the django static file.
My settings.py Django file has :
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
How can I make my html page load these static files ?
Looks like chrome version may not be compatible or it has something to do with the chrome extensions.
What you can do is to block background.js using this code:
$(document).ready(function(){
$.getScript("urlofscript");
});
To get the URL, hover on the background.js written on the inspection menu.
Hope this helps!
You path to other static files also doesn't seem to be correct
Django template support staticfile tag, so in your template at the top add load staticfile and include the static tag and the path is inside your static folder like so :
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<script src="{% static 'js/custom.js' %}"></script>

Manage static link in js libraries within django

So I was trying to add an audio recording function to my website developed with django.
I wanted to do something similar as https://github.com/addpipe/simple-web-audio-recorder-demo so I started by trying to run it without modification.
I took the same html as in the git linked above, put the js/ folder in my static/ folder, and simply changed the following lines (index.html, line 32-33)
<script src="js/WebAudioRecorder.min.js"></script>
<script src="js/app.js"></script>
for
{% load static %}
<script src={% static "js/WebAudioRecorder.min.js" %}></script>
<script src={% static "js/app.js" %}></script>
These js files load correctly, but the problem is that when I click record on my website, I get a "GET /myapp/record/js/WebAudioRecorderWav.min.js HTTP/1.1" 404 error in my django server.
WebAudioRecorderWav.min.js is called within WebAudioRecorder.min.js. I tried to use the {% load static %} trick in the js file, but it doesn’t work.
What would be the correct way to work around this?
Thanks in advance.
You should use the workerDir setting to set the correct path to the other imported js files. Probably your recorder is initialised in app.js, where you cannot use template tags like {% static %}. The best way is to create a global variable in your template before loading app.js:
In your HTML template:
<script>var jsFilesPath = "{% static 'js/' %}"</script>
<script src="{% static 'js/app.js' %}"></script>
In your app.js:
if (typeof jsFilesPath !== "undefined") {
audioRecorder = new WebAudioRecorder(sourceNode, {
workerDir: jsFilesPath // must end with slash
});
}

django 1.11 Template can't not load static file

i set it up STATICFILES_DIRS STATIC_URL in settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'projectName', 'static'),
]
and i want to use javascript files in template but it is not working.
js file path is app/static/app/new.js
and i used it in template using this code
{% load static %}
<script type="text/javascript" src="{% static "app/new.js" %}">
$(document).ready(function(){
alert(1);
new_function();
});
</script>
function in new.js as well as alert does not working.
If I delete the src part in script tag, the alert works fine.
I can see the new.js script by accessing the path that appears in the chrome developer tool.
What did I do wrong?

django how to include javascript in template

I'm starting a project and following the documentation I didn't succeed to include javascript.
Here is my settings:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
STATIC_ROOT = '/static/'
TEMPLATE_DIRS = (
os.path.join(BASE_DIR, 'templates'),
)
So I have a static folder create in my project with a javascript file.
myproject/static/app.js
my urls.py:
urlpatterns = [
url(r'^$', 'app.views.home'),
url(r'^admin/', include(admin.site.urls)),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
and in my template:
this is myproject/templates/base.html:
<!DOCTYPE html>
<head>
{% load static %}
<script src="{% static 'app.js' %}"></script>
<title>Site</title>
</head>
<body>
<img src="{% static 'img.png' %}" alt="Mon image" />
{% block content %}{% endblock %}
</body>
</html>
My other template:
{% block content %}
hello world
{% endblock %}
I have the "hello world" on
http://127.0.0.1:8000/
but i do not have my image or script.
I tried so many different things but I never succeed
urls.py
from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
]
settings.py
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
STATIC_URL = '/static/'
# remove STATIC_ROOT
base.html
Your title tag was not closed.
<!DOCTYPE html>
<head>
{% load static %}
<script src="{% static 'app.js' %}"></script>
<title>Site</title>
</head>
<body>
<img src="{% static 'img.png' %}" alt="Mon image" />
{% block content %}{% endblock %}
</body>
</html>
Your template should say {% load staticfiles %} instead of {% load static %}
Source:
https://docs.djangoproject.com/en/1.8/howto/static-files/
Also, os.path.join(BASE_DIR, "static"), only looks for static files in your apps, as in app/static/app/static.js. If you have static files that do not belong to any specific app, but rather to the project, you need to add the folder explicitly. See point 4 of 'Configuring static files' on the docs page I mentioned.
From my understanding, the STATICFILES_DIRS should be in the settings.py and defined like this:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
Please check the documentation.
I am new at programing thus take my points with a pinch of salt. There i go. maybe you have more apps meaning you gotta check your tree as it should go as the django documentations points.
meaning that you should have your_app/static/your_app/in here you must put three more folders corresponding to css, images and js all with their respective files.
Also notice that your static url should be named diferent than your static root.
Once you have done this you must tell django where to find the statics for each app thus you gotta state it within the STATICFILES_DIRS.
After all this then you gotta run the collectstatic command.
I´m still missing the part in which you connect the js files of each app to the template.. so I cannot further help you dude.... hope it helps a little bit
Create directory named 'static' at base directory. i.e. at similar level to project directory.
Then add following in settings.py
STATIC_URL = '/static/'
#setting for static files
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),) code here

Django doesn't seem to be recognizing jquery - what now>

I'm in desperate need of help. I have followed many tutorials, as well as scrutinized this, this, this, and this article. I was getting error messages when following the Django documentation for static servers mentioned in the middle two articles, but I seem to be doing all the right things discussed in the two regarding settings.py, placing jquery.js in the correct directory and referencing the correct source in the actual html file.
My media directory seems to be being referenced - the css file in there is working splendidly, and if I go to http://127.0.0.1:8000/media/jquery.js, the jquery file is displayed.
Still, none of my functions that I've built after following multiple tutorials work for me on my django project. I've been banging my head against the wall for days - please help if you can.
Django App Project File:
__init__.py
data.db
javascript_app/
manage.py
media/
settings.py
templates/
urls.py
views.py
Javascript App Directory:
__init__.py
admin.py
models.py
tests.py
urls.py
views.py
Media Directory:
jquery.js
style_js.css
Templates Directory:
javascript_app/
base.html
note_list.html
In my main settings file:
import os.path
ROOT_PATH = os.path.dirname(__file__)
...
MEDIA_ROOT = os.path.join(os.path.dirname(__file__), "media")
MEDIA_URL = 'http://127.0.0.1:8000/media/'
ADMIN_MEDIA_PREFIX = '/media/admin/'
In my main urls file:
from django.conf.urls.defaults import *
from django.views.static import *
from django.conf import settings
...
urlpatterns = patterns('',
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT }),
Desperately, I also put a media reference in my javascript_app 's urls.py (with the above-referenced import commands as well):
urlpatterns = patterns('',
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT }),
In templates/javascript/base.html:
<head>
<title>{% block title %}Notes Application{% endblock %}</title>
<link rel="stylesheet" href="/media/style_js.css">
<script type="text/javascript" src="/jennystanchak/media/jquery.js"></script>
</head>
And finally in templates/javascript/note_list.html:
{% extends "javascript/base.html" %}
{% block content %}
...
<script>
// my script here
</script>
{% endblock %}
What in the configuration am I missing??
Thank you SO MUCH in advance for your help :)
-- An aspiring female programmer
<script type="text/javascript" src="/jennystanchak/media/jquery.js"></script>
Shouldn't the path be src="/media/jquery.js" without /jennystanchak ?

Categories

Resources