Well my template code.
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="{% static 'website/staffaddproblem.js' %}"></script>
<title>Dashboard</title>
<link href="{% static 'website/style.css' %}" rel="stylesheet" type="text/css"/>
</head>
<body>
body
</body>
<html>
As you can see it has a css file. which is working properly, but java script file does not work.
when i load the page its source looks like this.
When i click the link it loads the file too its there its linking fine but its not working . there is no problem in code js code working fine when written in same file.
Have you changed the settings.py file to include staticroot?
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Here's a part of my template which works with both js and css files.
{% load static %}
<html>
<head>
<link type="text/css" rel="stylesheet" href="{% static 'css/materialize.min.css' %}">
<link type="text/css" rel="stylesheet" href="{% static 'css/stylesheet.css' %}">
<script type="text/javascript" src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
<title>
The directories are as follows:
- static
-js
- jquery-1.11.3.min.js
-css
- stylesheet.css
- materialize.min.css
- templates
-index.html
Related
Is there something wrong with this code, i have been checking the code for errors but it does not seem to display the required CSS and JS on the web page.
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Network Scanner</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'fa/css/all.min.css' %}">
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<h2>Test to see if this works</h2>
</body>
</html>
If you're loading stylesheets/scripts, try just putting the path to them inside the href attribute. (No brackets). I just looked at the jinja docs and it says that expressions should be used using {{ }}
Using Django {% load staticfiles %} I'm trying to load an app.js file in my base.html template.
I've seen several questions on StackOverflow about this and I also tried to follow this tutorial: https://www.techiediaries.com/javascript-tutorial/ but no of them actually helped with my issue.
It seems strange as well because on dev tools I see a 200 GET on the static/js/js.app and when I actually open the path the javascript is there.
Additionally, when I put the js code in a at the end of the body it seems to work. But I want to load the js from a file.
Below is the latest that I've tried, but still no luck.
base.html
<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'js/app.js' %}" rel="stylesheet">
<link href="{% static 'css/main.css' %}" rel="stylesheet">
<body>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!-- jquery -->
</body>
</html>
Settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Put the following script after the body tag.
<script type="text/javascript" src="{% static 'js/app.js' %}"></script>
Why? When loading JavaScript files, it tends to fall under one of two cases.
The Javascript file contains functions which are needed while the page is loading OR
The Javascript file contains functions which should be used after the page is loading.
Conclusion
If the JS file contains functions referencing HTML elements then you should put it after the body tag so the page's DOM elements can finish loading first before the script. Else, putting it in the head works as well.
P.S - You should also consider performance, as there is a difference in that aspect when importing JS files in the head and after the body
Adding <script type="text/javascript" src="{% static 'js/app.js' %}"></script> below my </body> fixed the problem I had with the js file not loading.
Im trying to upload templates from HTLM5 UP into the Django framework. However I'm not sure where to place some of the supporting CSS, SASS, Webfonts, Javascript files. Link to the template I downloaded below. Files I'm referring to are in the "Assets" folder.
https://html5up.net/strata
I've tried placing them in the path below. I'm using the Pycharm IDE if that changes anything.
ProjectName/mysite/templates/mysite/assets
I've been trying to call them with href="mysite/assets/css/main.css" with no success.
IDE: PyCharm
At first, you need to {% load staticfiles %} top of the .html file
And link your file like :
CSS = <link rel="stylesheet" href="{% static 'assets/css/main.css' %}" />
img= <img src="{% static 'images/rakib.jpg' %}" alt="" />
Js= <script src="{% static 'assets/js/jquery.min.js' %}"></script>
Full code:
Filename: base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title> {% block head_title %} Blog {% endblock head_title %} </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href=href="{% static 'assets/css/main.css' %}" />
<style>
{% block style %} {% endblock style %}
</style>
{% block head_extra %} {% endblock head_extra %}
</head>
If I copy the code from W3Schools to my webserver then the "sticky" menu works as long as I am referencing the CDN path for the script and
stylesheet.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
If I change it to the location of the Bootstrap files that I have downloaded to the server then it doesn't work, although all other bootstrap
styles and javascript functions work when referencing the local files. I have tried downloading the latest from Bootstrap as well.
Sorry as I am probably missing something obvious, but is it possible to download the function and styles necessary for this to work?
i suggest try this: first you need set your static files in this case Bootstrap(css, js, etc):
static
....Bootstrap
......CSS
.........bootstrap.min.css
......JS
.........jquery-3.3.1.slim.min.js
.........popper.min.js
.........bootstrap.min.js
....etc
..etc
in this case we has the posible structure folder for static into this folder put the folder that content css an js files of bootstrap.
the next is set your links for css and js files in you template similar to this:
{% load staticfiles %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'Bootstrap/css/bootstrap.min.css' %}">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{% static 'Bootstrap/js/jquery-3.3.1.slim.min.js' %}"></script>
<script src="{% static 'Bootstrap/js/popper.min.js' %}"></script>
<script src="{% static 'Bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
now you need this on your settings.py:
..
..
..
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/static/',
]
...
..
that is all for load bootstrap or other static files in yout template, please try and good luck.
For download Bootstrap4 , 3..etc.. go to the official website:
Official site Bootstrap
I'm having a lot of trouble getting all my static files to serve up. In my settings.py, I have:
STATIC_URL = '/static/'
I'm using Django 1.6, and according to the official documentation https://docs.djangoproject.com/en/dev/howto/static-files/
Since I have debug=True, this should suffice.
Then in my templates:
<link type="text/javascript" href="{% static 'jquery-1.11.1.js' %}" />
<link type="text/javascript" href="{% static 'jquery-1.11.1.min.js' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'jumbotron.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'custom.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'simple-sidebar.css' %}" />
All the CSS works fine. When I load my page, looking in Chrome's developer tools, they're coming from /static, and I have all these files stored in the same dir. But the .js files are not loading at all. They work fine if I link to the CDN.
As I said in the comments, with <script> tags, they shouldn't be self-closing so
<script type="text/javascript" src="{% static 'jquery-1.11.1.min.js' %}"></script>
note the <script ...></script> instead of <script .../>
This is probably why your subsequent link tags aren't being processed properly
What is link in
<link type="text/javascript" href="{% static 'jquery-1.11.1.min.js' %}" />
It should be
<script type="text/javascript" src="{% static 'jquery-1.11.1.min.js' %}"></script>