I have index.html file in template file and I have js, css, image, files in my static file. I am writing the codes correctly, but the site does not appear properly. Animations, images and text are not in the correct place. (In fact, the logo of the project I used to work with appears in this project. Both are called "logo.png", I think pycharm is confusing the codes. But I opened my project with Visual Studio Code, and the logo of my old project appeared again. Why is this happening? Do I need to delete something?)
settings.py
STATIC_URL = 'static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
index.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<!-- Basic -->
<head>
<link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" type="image/x-icon">
<link rel="apple-touch-icon" href="{% static 'images/apple-touch-icon.png' %}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<!-- Site CSS -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<!-- Responsive CSS -->
<link rel="stylesheet" href="{% static 'css/responsive.css' %}">
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ALL JS FILES -->
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<!-- ALL PLUGINS -->
<script src="{% static 'js/jquery.superslides.min.js' %}"></script>
<script src="{% static 'js/bootstrap-select.js' %}"></script>
<script src="{% static 'js/inewstickerjs' %}"></script>
<script src="{% static 'js/bootsnav.js.' %}"></script>
<script src="{% static 'js/images-loded.min.js' %}"></script>
<script src="{% static 'js/isotope.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/baguetteBox.min.js' %}"></script>
<script src="{% static 'js/form-validator.min.js' %}"></script>
<script src="{% static 'js/contact-form-script.js' %}"></script>
<script src="{% static 'js/custom.js' %}"></script>
</body>
</html>
I shared important parts of HTML codes
This is what the site looks like
But it should look like this
I hope I was able to explain what my problem was. I will be glad if you help me
The problem seems to be that you might not be reseting the cache. Browsers store caches to make the website run faster, so even though you made changes to the static files(like CSS, js or images), your browser uses the old CSS which is cached. One way to fix this issue during development is to hard refresh, ctrl + shift + r to clear CSS related caches and crtl + F5 for js related files, alternatively you can disable cache in your browser. In development we use versioning to counter this issue. I hope this resolves your issue.
Related
I try to load the bootstrap-datepicker.js (Located: ...\AEB\static\date_picker\js)
{% load staticfiles %}
<script type="text/javascript" src="{% static "Leaflet_modi.js" %}"></script>
<!-- Files for date time picker---------------------->
<link rel="stylesheet" href="{% static 'date_picker/css/datepicker.css' %}" type = "text/css"/>
<script type="text/javascript" src="{% static "date_picker/js/bootstrap-datepicker.js" %}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Start_Date').datepicker({
format: "dd/mm/yyyy"
});
});
$(document).ready(function () {
$('#End_Date').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
Here is my project structure:
But I always get the following error message:
"Uncaught TypeError: $(...).datepicker is not a function"
But I do not get any 404 (see image below)
Where is my mistake? Thanks for your help.
You need to call jquery first,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="{% static "Leaflet_modi.js" %}"></script>
<!-- Files for date time picker---------------------->
<link rel="stylesheet" href="{% static 'date_picker/css/datepicker.css' %}" type = "text/css"/>
<script type="text/javascript" src="{% static "date_picker/js/bootstrap-datepicker.js" %}"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I thing your routing in false!!
If you have some files like this :
-<project folder>
----<project-config-folder>
--------setting.py
-------- .
-------- .
-------- .
-------<app-name>
-----------views.py
-----------models.py
-------- .
-------- .
-------- .
--------static
--------------posts
--------------------a.jpg
-------- .
-------- .
-------- .
You can use like this to set file path :
<img src="{% static "posts/a.jpg" %}" alt="My image"/>
I am trying to set up an app using Polymer/Django. I have one template that basically exists to instantiate my base component (admin-panel), which works rather swell. The trouble is that now the that I use inside my component doesn't pick up any changes! What gives?
Here's my template:
<head>
<link rel="import" href="{% static 'index.html' %}"/>
<script src="{% static 'bower_components/webcomponentsjs/custom-elements-es5-adapter.js' %}"></script>
<!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
<script src="{% static 'bower_components/webcomponentsjs/webcomponents-loader.js' %}"></script>
<link rel="import" href="{% static 'src/admin-panel.html' %}"/>
</head>
<body>
<admin-panel></admin-panel>
</body>
My Django urlpatterns all resolve to the above template:
urlpatterns = [
url(r'^(?!api).*$', views.index, name='index'),
]
And here's the part of my admin-panel component:
<app-location
route="{{route}}"
url-space-regex="^[[rootPath]]">
</app-location>
<app-route
route="{{route}}"
pattern="[[rootPath]]:page"
data="{{routeData}}"
tail="{{query}}">
</app-route>
<app-drawer-layout fullbleed narrow="{{narrow}}">
<!-- Main content -->
<app-header-layout has-scrolling-region>
... stuff ...
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="not-found-page"
role="main">
<landing-page name="landing-page"></landing-page>
<organization-detail-page
name="organization-detail-page"
route="[[query]]">
</organization-detail-page>
<not-found-page name="not-found-page"></not-found-page>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
Anyone else used app-route with django templates? What did you do?
I thought it would be easier to download bootstrap and adjust it to my code, instead of messing about a cdn. So I downloaded bootstrap and my directory looks like this.
My static directory is properly (I think) setup since my style.css and maps.js are working fine.
In my base.html I reference the files with:
The old way <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel='stylesheet' type='text/css' href="{% static 'style.css' %}" />
<script src="{% static 'maps.js' %}"></script>
<script src="{% static 'bootstrap-3.3.7' %}"></script>
The static boostrap-3.3.7 is not working. The cdn worked however. My question is how would my static import look to have this setup with the bootstrap directory properly work?
I'm sorry if it's a stupid question.
You are trying to include a complete directory into your HTML, which is impossible. You should adjust the path in {% static 'bootstrap-3.3.7' %} to the location of the actual file you need.
<script src="{% static 'bootstrap-3.3.7/dist/js/boostrap.min.js' %}"></script>
Note, don't forget to add the css file too, you need to include them both individually. Which will probably be:
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-3.3.7/dist/css/boostrap.min.css' %}"/>
I have a django page and I add various js dependencies on multiple pages. For example, on page 1 and 2 I have table that I want to sort. So I include following code in both pages.
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">
<script type="text/javascript" src="{% static 'js/bootstrap-sortable.js' %}"></script>
Let's say, on page 3 and 4 I have nvd3 graphs. So I include following code:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.js"></script>
<link href="{% static 'js/nvd3-master/build/nv.d3.css' %}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">
If I need to edit src url of these dependencies, I have to edit all pages containing them separately.
I would like to define variables on js and css static files, so I do not have to edit them multiple times, but just once.
Something like this:
bootstrap_sortable_css = """<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">"""
bootstrap_sortable_js = """<script type="text/javascript" src="{% static 'js/bootstrap-sortable.js' %}"></script>"""
And then just print it in my template:
<html>
<head>
{{bootstrap_sortable_css}}
</head>
<body>
content
{{bootstrap_sortable_js}}
</body>
</html>
Is there any standard for this I did miss?
You might want to use block. Block is used for template inheritance. So, you can have 1 root template file, then all your pages just need to inherit the root template.
You can define A css and js block like this.
<html>
<head>
{% block css %}
{% endblock css %}
</head>
<body>
content
{% block js %}
{% endblock js %}
</body>
</html>
Then, you can override the block on your page template based on your page needs.
i an doing exactly the same Django admin datepicker calendar and clock img
and i am suffering with the same problem but it was working perfectly fine with django 1.4 but when i updated it to django 1.5 it is giving me this error
'adminmedia' is not a valid tag library: Template library adminmedia not found, tried django.templatetags.adminmedia,django.contrib.staticfiles.templatetags.adminmedia,django.contrib.admin.templatetags.adminmedia,django.contrib.humanize.templatetags.adminmedia,jobpost.templatetags.adminmedia,crispy_forms.templatetags.adminmedia,tinymce.templatetags.adminmedia,haystack.templatetags.adminmedia
here is my code:
{% load adminmedia %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block content %}
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/my_admin/jsi18n/"></script>
<script type="text/javascript" src="/media/admin/js/core.js"></script>
{{ form.media }}
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/global.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css"/>
<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"> </script>
<script type="text/javascript" src="/static/admin/js/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>
<script type="text/javascript" src="/static/admin/js/calendar.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"> </script>
<script type="text/javascript">
window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";
</script>
<script type = “text/javascript” src=”../jscripts/tiny_mce/tiny_mce.js”></script>
<script>
by doing this i am showing image of calender widget from /static/admin/img/icon_calender.jpg.
but admin media option is deprecated in django version 1.5 or later so then i replace this with static media option and here is the new code:
{% load staticfiles %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block content %}
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/my_admin/jsi18n/"></script>
<script type="text/javascript" src="/media/admin/js/core.js"></script>
{{ form.media }}
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/global.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css"/>
<link href="{% static 'admin/css/login.css' %}" rel="stylesheet">
and it look like this:
my calender icon is gone. can anyone tell me whats the alternative of this problem in version 1.5
help will be appreciated
The response is right here, in the 1.5 release notes: https://docs.djangoproject.com/en/dev/releases/1.5-beta-1/#miscellaneous
The {% admin_media_prefix %} became deprecated, you must remove it from your templates. (Included every {% load adminmedia %}, which causes the exception). There must be a setting which replace this tag I guess.
so django 1.5 was giving me nightmare so i resolved my problem by using direct jquery datpicker here is the jquery datepicker
all i had to do is change the id which is a little bit tricky in django .for example if your date field name is start_date then id will be formtools_start_date . and for this kind of datepicker you don't even need any icon to show.. this helped me i hope this will help those also whoever upgraded their django version.
I just had this problem today - not being able to load admin base.css. I upgraded Django for my site from v1.2 to v1.5 and encountered the issue. I found that the href is /static/admin/css/base.css and could not find out how to change it. So I did these:
Copied site-packages/django/contrib/admin/static/admin/* to my Django project's static directory so it would be like
top/
static/
admin/
css/
js
images
Editted urls.py, added the following line in the urlpatterns = patterns('',...
(r'^static/(?P.*)$','django.views.static.serve', {'document_root': settings.MEDIA_ROOT, 'show_indexes':True}),
That's it. It worked.