import css using 'static' template in Django - javascript

I have been importing JS files into my template using:
<script src="{% static 'inventory/js/panel.js' %}" type="text/javascript"></script>
while importin CSS using
<link href="{{ STATIC_URL }}common/css/form.css" rel="stylesheet" type="text/css">
Can you tell me how to import CSS files using the static template tag like in importing JS files. Thanks

It's almost the same as your js:
{% load staticfiles %}
<link href="{% static "css/base.css" %}" rel="stylesheet"/>

Related

Bootstrap 5 - Uncaught TypeError: Popper__namespace.createPopper is not a function

So I am using Django to serve web pages.
I am trying to make sure I am able to download all the resources necessary to make the webpage function as intended for offline use (as in one of those resources could be unavailable for my client to request, so I want to be able to have my server serve those files). One of which is bootstrap 5.
I am trying to use their dropdown menu feature... according to their docs: "Dropdowns are built on a third party library, Popper, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required."
Because I am so desperate to find a solution, I have inserted a bunch of <script> tags trying to rule out the problem... maybe its a bad idea.
All that said, I haven't been able to figure it out. Help :) ?
Please, let me know how I can improve this question. Thank you in advance!
{% load static %}
<html class="w-100 h-100">
<head>
<title>
Fonts
</title>
<!--Important meta tags-->
<!--Cancel zoom for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!--example:-->
<!--href="{% static 'polls/style.css' %}"-->
<!--theme-->
<link rel="shortcut icon" type="image/jpg" href="{% static 'Pages/favicons/CES.png' %}"/>
<link type="text/css" rel="stylesheet" href="{% static 'Pages/css/main.css' %}">
<script src="{% static 'Pages/js/main.js' %}"></script>
<!--jQuery-->
<script src="{% static 'Pages/jQuery/jquery-3.6.0.js' %}"></script>
<script src="{% static 'Pages/jQuery/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'Pages/jQuery/jquery-3.6.0.slim.js' %}"></script>
<script src="{% static 'Pages/jQuery/jquery-3.6.0.slim.min.js' %}"></script>
<!--bootstrap related-->
<link type="text/css" rel="stylesheet" href="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.css' %}">
<link type="text/css" rel="stylesheet" href="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.min.css' %}">
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.min.js' %}"></script>
<style>
{% if fonts %}
{% for font in fonts %}
#font-face
{
{% if font.font_family %}
font-family: "{{font.font_family}}";
{% endif %}
{% if font.path %}
src: url("{{font.path}}");
{% endif %}
}
{% endfor %}
{% endif %}
</style>
</head>
<body class="m-0 p-0 w-100 h-100">
<button id="fonts" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Fonts</span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="fonts">
{% if fonts%}
{% for font in fonts %}
<li><div class="dropdown-item" style="font-family: '{{font.font_family}}'; text-align: center;">{{font.font_name}}</div></li>
{% endfor %}
{% endif %}
</ul>
</body>
</html>
Further reading (from http://5.9.10.113/65685854/dropdown-button-in-bootstrap-5-not-working) has shown that a new version of Popper is actually causing the problem... so... I will investigate a little more and see what I can do.
EDIT FOR ANSWER:
Just for testing purposes, I added this snippet from bootstrap's download page, and it works as expected. From here I went through all of my sources for bootstrap (not to mention that I folded and added the Popper CDN) and come to find out, something was wrong with my bootstrap.js file. After grabbing the newest distribution of it from npm (and putting the build into a subdirectory for my use) I exchanged the Popper CDN for its counterpart via npm as well (I downloaded it, went into node_modules/ #popper/core/..., found the min file and referenced it) and now it works like a charm... Last thing worth mentioning: ONLY USE THE .MIN. FILES!* so popper.min.js, bootstrap.min.js, bootstrap.min.css... having all the other files in script tags will cause bootstrap to not function properly.
<html class="w-100 h-100">
<head>
<title>
Menu
</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body class="m-0 p-0 w-100 h-100">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</body>
</html>
I received this error (TypeError: i.createPopper is not a function) each time when popovers should be shown. Previously I had to make use of the Separate Popper and Bootstrap JS (Option 2) - due to conflict with other scrips. However this is no longer necessary in my project, with Bootstrap 5.1.1.
Including only the Bootstrap bundle with popper - as per #Kevin's comment above - fixed the issue for me - And the previous conflicts don't seem to be an issue anymore. All popovers, tooltips, modals, sidebars etc. seem to now be working properly:
<body>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
For angular project make sure you have to use
"scripts": [ "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ].
I was including bootstrap.min.js instead of bootstrap.bundle.min.js
It happens because Bootstrap 5+ uses popper js for dropdown, and requires popper.js or popper.min.js to be declared in your script sources, or you can use bootstrap.bundle.js (or bootsrap.bundle.min.js).
So instead of just using:
<script src="[...YOUR_JS_CDN...]/bootstrap.min.js" />
Add popper js before bootstrap:
<script src="[...YOUR_JS_CDN...]/popper.min.js" />
<script src="[...YOUR_JS_CDN...]/bootstrap.min.js" />
Or use bootstrap.bundle:
<script src="[...YOUR_JS_CDN...]/bootstrap.bundle.min.js" />
In your case, replace this (since you redeclare bootstrap js again at the end):
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.min.js' %}"></script>
And use only:
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.js' %}"></script>
I get the same error in my ANGULAR 13 project & solve it after performing below changes:-
I changed the code in angular.json file like
build >> options >> scripts
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"src/assets/js/popper.min.js",
"src/assets/js/calender.js",
"src/assets/js/jquery.easing.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
& use the specific version of BOOTRAP, JQUERY & POPPER JS in package.json file like:-
"bootstrap": "^5.1.3",
"jquery": "^3.6.0",
"popper.js": "^1.16.1",
According to project Angular, must be declared in the component where the navbar or function is called.
import { createPopper } from '#popperjs/core';
worked for by moving popper.js to src/assets/js/popper.min.js in angular 13
I also had this problem and it was caused by the wrong order of js insertions.
First you have to load popper js then bootstrap js as written on bootstrap doc site. This solved this issue in my case.
This error occurs because of not loading popper.js along with bootstrap.
The bootstrap dropdown menu uses javascript code from popper js. In order to work with the bootstrap menu, you must use popper.js.
You can use this bootstrap starter file in any kind of project whether it is Django or any other framework.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</body>
</html>
or you can add popper.js and bootstrap js before your ending body tag and don't forget to add popper js before bootstrap.
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
For my Vue 3 and Nuxt-bridge app I added this to the nuxt.config.js file:
script: [
{
src: "https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js",
type: "text/javascript"
},
{
src: "https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js",
integrity: "sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ",
crossorigin:"anonymous"
}
]
And made sure I didn't have any versions of bootstrap or jquery in my package.json
I got the same issue with popper.js and I just figured out to replace my cdn with bootstrap js bundle to solve this issue

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>

Javascript runs in template html file but not extended html file in Django application

I am writing a website in Django and Vanilla JS
I have 2 html pages, I want them both to share css but I want them to use different javascript.
Both pages extend a layout.html.
The layout.html looks begins like this
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Social Network{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="{% static 'network/styles.css' %}" rel="stylesheet">
</head>
My index.html (which extends my layout.html) begins like this
{% extends "network/layout.html" %}
{% load static %}
<script src="{% static 'network/messages.js' %}"></script>
and my Javascript file looks like this:
document.addEventListener('DOMContentLoaded', function() {
console.log("page loaded!")
document.addEventListener('click', event => {
const element = event.target;
console.log("Something was clicked")
})
});
It simply prints out a line when the page is loaded and when something is clicked.
However, when I go to index.html with the code like this, the javascript file is not loaded, nothing is printed out when the page is loaded or when anything is clicked.
However, if I modify the layout.html page to be like this:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Social Network{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="{% static 'network/styles.css' %}" rel="stylesheet">
<script src="{% static 'network/messages.js' %}"></script>
</head>
where I load the messages.js, and then remove it from the index.html like this:
{% extends "network/layout.html" %}
Then the javascript works, and the page loads it properly.
The only problem with this is that it also loads it for my other pages which I do not want, I only want to load message.js for index.html and I am not sure why it refuses to load when I only include it in index.html.
I appreciate any help.
This is not how you extend templates. Django templates use a block system. So the script in the index.html isn't rendered at all. You must have an empty block in layout.html, and override that block in index.html.
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Social Network{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="{% static 'network/styles.css' %}" rel="stylesheet">
</head>
<body>
{% block content %}{% endblock content %}
</body>
</html>
index.html
{% extends "network/layout.html" %}
{% load static %}
{% block content %}
<script src="{% static 'network/messages.js' %}"></script>
{% endblock content %}
Try adding HTML to your current index.html. It won't be displayed. You must enclose everything in blocks for it to work.

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

How to add Css and Js files in Django python

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

Categories