django how to include javascript in template - javascript

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

Related

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

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.

How do I load static JavaScript files inside django framework

I know I'm doing something wrong, after consulting the docs and watching 3 YouTube videos that get it spun up in the first 7 min and copying them it still doesn't work
I'm basically trying to get to hello world from clicking a button
The Relevant lines in my HTML
{% extends 'box2.html' %}
{% load static %}
{% block content %}
<button class="btn btn-success mt-3" type="button" onclick="handle_do_thing_click()" type="">Add Planner</button>
{% endblock %}
{% block js_block %}
<script type = "text/javascript/" src="{% static 'js/doThing.js' %}"></script>
{% endblock %}
my settings.py static settings
INSTALLED_APPS = ['django.contrib.staticfiles']
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static']
my url.py file
from django.urls import path
from django.contrib.auth import views as auth_views
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [ these work
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
and my js file which exists in app/static/js/doThing.js is hello world
function handle_do_thing_click() {
console.log("hello world");
}
The console error is
Uncaught ReferenceError:
handle_do_thing_click is not defined at HTMLButtonElement.onclick
For me, removing type="text/javascript/" from <script> tag make it work.

Use JS library with Django

I have a problem using a js library with django. I am trying to use the particle.js library to generate a particle background for the home page and I have tried following this tutorial.
I have created a particle.json and style.css in my static folder.
UPDATED VERSION (with static files)
home.html
<!-- templates/home.html -->
{% load socialaccount %}
{% load account %}
{% load static %}
<head>
<link rel="stylesheet" href="{% static 'style.css' %}"> </head>
<body>
<div id="particles-js">
{% if user.is_authenticated %}
<p>Welcome {{ user.username }} !!!</p>
<a href="/accounts/logout/" >Logout</a>
{% else %}
Log In with Github
Log In with Twitter
Log In with Facebook
Log In with LinkedIn
{% endif %}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script>
<script>
particlesJS.load('particles-js', '{% static 'particles.json' %}', function(){
console.log('particles.json loaded...');
});
</script> </body>
defined the static path in settings.py
STATIC_URL = '/static/'
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'artemis/static')
]
and im my urls.py file
urlpatterns = [
url(r'^admin/', admin.site.urls),
url('accounts/', include('allauth.urls')),
url('', views.Home.as_view(), name='home'),
] + static(settings.STATIC_URL)
When i start the server, I get the following errors in the console:
GET http://127.0.0.1:8000/static/ net::ERR_ABORTED
Uncaught ReferenceError: particlesJS is not defined
The project structure:
I just started learning django so I know this might sound like a stupid question but any idea what might be going wrong here?
Django can not parse the remainder:
{% static style.css %} this should be {% static 'style.css' %} with quotes
{% static particles.json %} should be {% static 'particles.json' %} with quotes

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 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