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?
Related
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.
I haven't used Django for a while, so I forgot many things of Django. When I click url link on this site, it moves to another pages, but the pages don't work properly. But if I reload the page or retype the same url, the pages work.
I wrote like these,
slideUp header
or
carousel
I read several pages, but I don't know what to do. Would you please help me?
index.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en-EN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- for IE -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Welcome to my Samples!</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<style type="text/css"></style>
</head>
<body>
<div>
<span>Welcome to my samples!!</span>
<dl>
<dt>Bootstrap</dt>
<dd>affix</dd>
<dd>carousel</dd>
<dt>BxSlider</dt>
<dd>responsive</dd>
<dt>Magic</dt>
<dd>slideUp header</dd>
</dl>
</div>
<!-- JavaScript -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript" ></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js type="text/javascript" ></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript"></script>
</body>
</html>
url.py
from django.conf.urls import include, url
from django.contrib import admin
admin.autodiscover()
import hello.views
# Examples:
# url(r'^$', 'gettingstarted.views.home', name='home'),
# url(r'^blog/', include('blog.urls')),
urlpatterns = [
url(r'^$', hello.views.index, name='index'),
url(r'^bxslider/$', hello.views.bxslider, name='bxslider'),
url(r'^affix/$', hello.views.affix, name='affix'),
url(r'^carousel/$', hello.views.carousel, name='carousel'),
url(r'^slideup_like_magic/$', hello.views.slideup_like_magic, name='slideup_like_magic'),
url(r'^db', hello.views.db, name='db'),
url(r'^admin/', include(admin.site.urls)),
]
Django-1.9.2
////// Additional //////
This is what I see when I move page from http://bananaman.herokuapp.com/.
And this is what I am supposed to see, for instance, http://bananaman.herokuapp.com/slideup_like_magic.
I haven't bothered to work through everything that is going on, but it looks like the issues you are experiencing are due to jQuery Mobile's link hijacking. It doesn't look like you have your data-* attributes correct from one page to the next.
I think you should start by pulling out jQuery Mobile and make sure everything is working correctly. Then add jQuery Mobile back in ensuring you have set up the page with the correct data-role attributes.
I'm not doing anything fancy. Just trying to get my static files to work using python manage.py runserver with Debug = True
'django.contrib.staticfiles' is installed.
These are my static settings:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
Here is my template syntax:
{% load staticfiles %}
<title>Dashboard</title>
<!-- Bootstrap Core CSS -->
<link href="{% static "boostrap/bower_components/bootstrap/dist/css/bootstrap.min.css" %}"
rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="{% static "boostrap/bower_components/metisMenu/dist/metisMenu.min.css" %}"
rel="stylesheet">
<!-- Timeline CSS -->
<link href="{% static "boostrap/dist/css/timeline.css" %}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{% static "boostrap/dist/css/sb-admin-2.css" %}" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="{% static "boostrap/bower_components/morrisjs/morris.css" %}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="
{% static "boostrap/bower_components/font-awesome/css/font-awesome.min.css" %}" rel="stylesheet" type="text/css">
findstatic can successfully locate these files when entered exactly as they are in the template:
(AlmondKing) C:\Projects\AlmondKing>python manage.py findstatic bootstrap/bower_components/bootstrap/dist/css/bootstrap.min.css --verbosity 2
Found 'bootstrap/bower_components/bootstrap/dist/css/bootstrap.min.css' here:
C:\Projects\AlmondKing\AlmondKing\static\bootstrap\bower_components\bootstrap\dist\css\bootstrap.min.css
Looking in the following locations:
C:\Projects\AlmondKing\AlmondKing\static
C:\Users\Adam\Envs\AlmondKing\lib\site-packages\django\contrib\admin\static
My URLS have no conflict:
ROOT URLS:
urlpatterns = [
url(r'^', include('AlmondKing.AKGenius.urls', namespace="AKGenius")),
url(r'^admin/', include(admin.site.urls)),
url(r'^purchases/', include('AlmondKing.InventoryLogs.urls', namespace="purchases")),
url(r'^company/', include('AlmondKing.FinancialLogs.urls',namespace="company")),
]
AKGenius URLS:
urlpatterns = [
url(r'^$', TemplateView.as_view(template_name='home.html'), name="home"),
url(r'^dashboard/$', TemplateView.as_view(template_name='control_panel.html'), name="dashboard"),
url(r'^support/$', 'AlmondKing.AKGenius.views.support'),
]
and the paths seem to be rendering correctly to the browser:
<!-- Bootstrap Core CSS -->
<link href="/static/boostrap/bower_components/bootstrap/dist/css/bootstrap.min.css"
rel="stylesheet">
And yes, I've restarted runserver since my last settings change.
What could be causing these to 404? Would it have something to do with Windows?
And as a proper answer in case anybody else comes across this post at a later date:
Looks like there's a typo in each line, where
{% static "boostrap
should be
{% static "bootstrap
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.