How to add Css and Js files in Django python - javascript

I am facing to load static only css and Javascript in my django project.
By this code image files are loading but only js and css files are not loading
{% load staticfiles %}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Home</title>
<link href="{% static "pro.css" %}" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="sd">
<h1>Hi my first django application</h1>
<img src="{% static "images/img08.jpg" %}"/>
<div id="demo"></div>
</div>
</body>
</html>
and my page source in browser
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Home</title>
<link href="/static/pro.css rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="sd">
<h1></h1>
<img src="/static/images/img08.jpg"/>
<div id="demo"></div>
</div>
</body>
</html>
my setting files code`
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR,'static')
STATIC_URL = '/static/'
STATICFILES_DIRS= (os.path.join(BASE_DIR,'questions','static','css'),os.path.join(BASE_DIR,'questions','static','js'),)
I got this error message when i checked in my Javascript console -
127.0.0.1/:19 Resource interpreted as Stylesheet but transferred with MIME type application/x-css:

This is for project (common) statics:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
And this is for your apps statics:
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
Then in template you can access it using:
{% load static %}
{# this is in project static dir == tip №1 == static/... #}
<script type="text/javascript" src="{% static ' js/bootstrap.min.js' %}"></script>
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
{# suppose your app name is `questions` == tip №2 == questions/static/questions/... #}
<script type="text/javascript" src="{% static 'questions/js/some.js' %}"></script>
<link href="{% static 'questions/css/pro.css' %}" rel="stylesheet" type="text/css">

Try this :
<link href="{% static "css/pro.css" %} rel="stylesheet" type="text/css"/>
same applies for js.
You have given path for images as static "images/image_name.jpg" but missing the same for css and js files

I guess what you are missing is collectstatic
run this command
python manage.py collectstatic
docs : https://docs.djangoproject.com/en/1.8/ref/contrib/staticfiles/
Hope this helps!

It was my problem too!
but i solve it :
you should go to your project setting setting.pyand find STATIC_URL
note url which is in STATIC_URL then change it to the path of absolute static files
for example my path is MySite/MyApp/static/My_App/'static files'
after that copy the path of your My_app to the STATIC_URL then it should work.
Note: you should insert your path in STATIC_URL with this format:
/file1/ or `/file1/file2/.../`
hope useful

Related

Why is my static CSS file working fine but not javascipt in Django?

I'm new to Django. I'm trying to add a javascript for my navbar. Browser is reading static CSS file properly. But it looks like browser is ignoring my static javascript file. Here is my code:
Settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Index.html
<html lang="en">
{% load static %}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' type='text/css' href="{% static 'style.css' %}">
<script type='text/javascript' src="{% static 'style.js' %}"></script>
<title>{% block title %}{% endblock title %}</title>
</head>
To check whether javascript is working properly I have only put a alert box. But still it is not showing alert box.
style.js
alert("Checking");

HTML not loading CSS in Django

I have a problem that my HTML code does not load my css files. The code works if put into the main.html tag, however as outsourced to the separate css files, not working at all.
Link to the project: https://github.com/Svantevith/Python/tree/master/ToDoList
The overall structure of the folder:
The head tag of main.html:
<head>
<title>ToDoList App</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> -->
<link id="sheet-theme" rel="stylesheet" type="text/css" href="light.css">
<!-- Nunito Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#200&display=swap" rel="stylesheet">
</head>
In my django project, the rest of HTML files extend the main.html file, for example the register view:
{% extends 'base/main.html' %}
{% block content %}
<div class="header-bar">
<h1>Register</h1>
</div>
<div class="card-body">
<form method="POST">
{% csrf_token %}
{{form.as_p}}
<input style="margin-top: 16px" class="button" type="submit" value="Register">
</form>
<p>Already have an account? <a id="plain" href="{% url 'login' %}">Login</a></p>
</div>
{% endblock content %}
What might be the problem?
EDIT:
Solved the problem by adding the base/static/base folder and accessing the css via {% static 'base/file.css' %} as mentioned in the comments and official documentation ;)
You have to just put the {% load static %} on top of your main.html code
And in the Head section, you should change the link as I did in href.
<link id="sheet-theme" rel="stylesheet" type="text/css" href="{% static 'light.css'%}">
Your href="light.css" is the problem here. The system is looking for that file in the main folder that you are in. You have to tell the system to go to the base folder in the template folder using Jinja syntax. Your link should be
<link id="sheet-theme" rel="stylesheet" type="text/css" href="{% static light.css %}">

Why doesn't Django load my javascript file correctly?

I am new to Django and I'm trying to implement drag and drop file uploading using dropzone.js. I was follow this tutorial to start of with. Dropzone is working fine and the file is being uploaded and stored correctly, my issues comes with the customization of the dropzone instance. I created a second javascript file to create my custom dropzone like the tutorial showed and included it into the django template. But for some reason this does not change anything, with or without customization javascript file, the dropzone looks exactly the same.
The javascript file:
Dropzone.autoDiscovery = false;
const dropzone = new Dropzone("#drop", {
dictDefaultMessage = "Upload your PDF here",
clickable: false,
url: "/upload",
maxFiles: 1,
acceptedFiles: ".pdf",
});
The django template file I'm trying to include the script into:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF2Notes</title>
</head>
<body>
<form method="POST" action="/upload" class="dropzone dz" id="drop">
{% csrf_token %}
<div class="fallback">
<input name="file" type="file">
</div>
</form>
<!--default stylesheet-->
<link rel="stylesheet" type="text/css" href="{% static 'converter/style.css' %}">
<script type="text/javascript" src="{% static 'converter/main.js' %}"></script>
<!--dropzone js & css-->
<link rel="stylesheet" tpye="text/css" href="{% static 'converter/dropzone/dist/dropzone.css' %}">
<script type="text/javascript" src="{% static 'converter/dropzone/dist/dropzone.js' %}"></script>
</body>
</html>
My static file directory is setup correctly, all my other static files load without issues and from the command prompt [15/Jan/2021 15:17:16] "GET /static/converter/main.js HTTP/1.1" 304 0
I can see that the file was found, since 304 stands for Not Modified.
Since I do not know any javascript, I'm not sure if I made a mistake in the javascript file, or if it is a deeper issue. Any help is appreciated.
You need to load the dropzone file before main.js since main.js requires the Dropzone member to exist.
Ok so I found my error, it was a quick fix caused, as always, by human error.
as #schillingt answered, I had to place the main.js include after the dropzone.js
I misspelled Dropzone.autoDiscover = false; as Dropzone.autoDiscovery = false;
I had a = instead of a : in after dictDefaultMessage in main.js
Final main.js:
var myDropzone = new Dropzone("#drop", {
dictDefaultMessage: "Upload your PDF here",
clickable: false,
url: "/upload",
maxFiles: 1,
acceptedFiles: ".pdf",
});
Final Django template:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF2Notes</title>
</head>
<body>
<form method="POST" action="/upload" class="dropzone dz" id="drop">
{% csrf_token %}
<div class="fallback">
<input name="file" type="file">
</div>
</form>
<!--dropzone js & css-->
<link rel="stylesheet" type="text/css" href="{% static 'converter/dropzone/dist/dropzone.css' %}">
<script type="text/javascript" src="{% static 'converter/dropzone/dist/dropzone.js' %}"></script>
<!--default stylesheet-->
<link rel="stylesheet" type="text/css" href="{% static 'converter/style.css' %}">
<script type="text/javascript" src="{% static 'converter/main.js' %}"></script>
</body>
</html>

How to load javascript file in django templates

i want to make countdown timer in django website,for that i use javascript.but javascript file is not loading in templates(i also load css file which works fine)
countdown.js
alert('hello'):
index.html
{% load staticfiles %}
<head>
<title>Countdown</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'css/app.css' %}">
<link rel="stylesheet" href="{% static 'js/countdown.js' %}">
</head>
<body>
<p>Hello World</p>
</body>
setting.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'static')

Javascript and jQuery on same HTML file

I have build a web site and for one of my pages I have some jQuery elements [start button, progress bar]. I'm implementing a javascript timer into the page and when I place the javascript info into the header, the jQuery no longer works. How do I avoid this problem? Thanks
jQuery Works/Javascript Doesn't Work
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'livestream/css/style.css' %}" />
<!DOCTYPE html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script type="text/javascript" src="{% static 'livestream/jquery- timer/res/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/jquery.timer.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/res/demo.js' %}"></script>
<html>
<head>
<style>
.progressInfo {
margin-left: leftmargin;
}
</style>
<meta charset="utf-8" />
<title>Main</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="{% static 'livestream/css/style.css' %}" />
jQuery Doesn't Work/Javascript Works
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'livestream/css/style.css' %}" />
<!DOCTYPE html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<html>
<head>
<style>
.progressInfo {
margin-left: leftmargin;
}
</style>
<meta charset="utf-8" />
<title>Main</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/res/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/jquery.timer.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/res/demo.js' %}"></script>
<link rel="stylesheet" href="{% static 'livestream/css/style.css' %}" />
First I'd get your basic <html> in order. I try to always use something like...
<!DOCTYPE html>
<html>
<head>
<meta>
<title>
<script></script>
<link>
</head>
<body>
</body>
</html>
Then, load jQuery and then any jQuery scripts (don't forget to use minifed versions). Make sure you are loading only one version of jQuery and if a script you are using does not comply with the version you are currently running then upgrade jQuery or the script (whichever is older.) As #Antti Happala mentioned, multiple instances of jQuery will surely cause issues.
The other thing I do while in development is use local versions of .js and .css files until I know everything is working properly then I transition to hosted versions, retest then go live.
So, I would try something like (from your first example)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Main</title>
<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.timer.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/newCustomCSSFileForYourSpecificCSS.css" />
</head>
<body>
<!-- Your good stuff here -->
</body>
</html>
http://html5boilerplate.com/ is a good place to look for examples
All of the .js files would be downloaded into a local js folder and all of the .css files would be kept locally in a css folder (again, you can change to hosted version when going live.) Make sure you only reference any .js or .css file once and combine and minify when/where possible.
Finally, make sure your .js files all work off of the same version of jQuery. If that does not work start checking firebug/chrome dev tools, etc for errors.
You are loading 2 jqueries on the same page, and possibly different versions, so surely things will go silly; also the script tags should be in head and certainly not before the <!DOCTYPE>

Categories