How to load javascript file in django templates - javascript

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

Related

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 %}">

what is the correct way to include a script in html

I am currently working on a project using Django, and I am having a weird problem with my script tags.
I have a layout.html file in which I have included Jquery and Bootstrap in the head. Using jinja, I am extending layout.html for my new file, main.html. In my new file I am now including a new script because this script is peculiar to this page.
The problem I am having is that this new script does not work in main.html unless I again include Jquery in inside main.html. Please, I would like to know if there is an explanation for this? or maybe I am missing something?
layout.html file
<html>
<head>
// script to include jquery here, version 3.3.1
// other scripts include, bootstrap.js, popper.js, knockout.js
</head>
<body>
{ block content % }
{ % endblock % }
</body>
</html>
Sample of main.html
main.html
{ % extends "layout.html" %} {% block content %}
// This new script below only works if jquery is included here
// new script here
<div> </div>
{% endblock %}
I am also using knockout.js, from which I am calling functions in new script on document load. The new script requires Jquery, But I don't understand why it's not finding the jquery unless its included in the same file. The I also get and error when I include JS in the main.html file because jquery should be included before bootstrap.js.
Please, I would be happy if anyone has encountered similar problems or if anyone can explain this to me.
This is the head for layout.html:
<head>
<title>Suggesto</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- font awesome-->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
/>
<!-- Js-cookie-->
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>
<!--Jquery-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"
></script>
<!-- Popper.js-->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"
></script>
<!-- Bootstrap.js-->
<script src="/static/bootstrap/js/bootstrap.js"></script>
<!-- Font -->
<link
href="https://fonts.googleapis.com/css?family=Noto+Serif+SC|Open+Sans|Quicksand|Montserrat"
rel="stylesheet"
/>
<!--Knockout.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
{% load staticfiles %}
<link
rel="stylesheet"
href="/static/bootstrap/css/bootstrap.css"
type="text/css"
/>
<link rel="stylesheet" href="/static/css/mainpage.css" type="text/css" />
</head>
The main.html starts like this
{%extends "mainpage/layout.html" %} {% block content %}
<script src="/static/js/jquery.session.js"></script>
<link
rel="stylesheet"
href="/static/css/star-rating.min.css"
media="all"
type="text/css"
/>
<script src="/static/js/star-rating.min.js"></script>
<script src="/static/js/suggest.js"></script>
<link rel="stylesheet" href="/static/css/suggest.css" type="text/css" />
<!-- Start -->
<div class="container" id="Page">
It ended up being a function from Knockoutjs:
ko.cleanNode( )
I don't know what this function does under the hood, something to look at. Feel free to provide more details if you know more.

import css using 'static' template in Django

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

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

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