Django Static JS Files Not Loading
Question
I have a django project I am working on, and I am pretty new to Django and Python in general. I have a simple template made, with all of my css and js files being called in the base.html file, while i am using {% content block %} to fill in the templates.
All of the css files are being called, as well as all the js files. I can view them by typing in /http://myurl://static/jsfile.js. The CSS files are working in my html document as well. The only thing that isn't working is any of the javascript, not even embedded javascript.
Here is my settings.py
# URL prefix for static files.
# Example: "http://media.lawrence.com/static/"
STATIC_URL = '/static/'
# Additional locations of static files
STATICFILES_DIRS = (
# Put strings here, like "/home/html/static" or "C:/www/django/static".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
'/djsite/djsite/static/',
'C:/djsite/djsite/templates/static/',
)
Here is my urls.py
# Site URLS
from django.conf.urls.defaults import *
from djsite.views import *
from django.conf import settings
# Uncomment the next two lines to enable the admin:
from django.contrib import admin
admin.autodiscover()
urlpatterns = patterns('',
# Main Pages
url(r'^$', 'django.views.generic.simple.direct_to_template', {'template': 'main/home.html'}),
(r'^about', 'django.views.generic.simple.direct_to_template', {'template': 'main/about.html'}),
(r'^profile', 'django.views.generic.simple.direct_to_template', {'template': 'network/user-home.html'}),
(r'^privacy', 'django.views.generic.simple.direct_to_template', {'template': 'main/privacy.html'}),
(r'^contact/$', 'djsite.views.contact'),
# Uncomment the admin/doc line below to enable admin documentation:
url(r'^admin/doc/', include('django.contrib.admindocs.urls')),
# Uncomment the next line to enable the admin:
url(r'^admin/', include(admin.site.urls)),
)
And here is my here is my base.html (It's a little longer, I cut off as much as I could)
<head>
<title>{% block title %}{% endblock %}</title>
<script type="text/javascript">
//initialize tabs
$(document).ready(function() {
$('#tabs').tabs();
});
//initialize slider
$(document).ready(function(){
$('#showcase').bxSlider({
hideControlOnEnd: true,
infiniteLoop: false,
});
});
//for portfolio captions
$(window).load(function capTions(){
$("a.caption").each(function(){
$(this)
.css({
"height" : $(this).children("img").height() + "px",
"width" : $(this).children("img").width() + "px"
})
.children("span").css(
"width", $(this).width() - 10 + "px")
.find("big").after('<div class="clear"></div>');
$("a.caption").hover(function(){
$(this).children("img").stop().fadeTo(500, .6);
$(this).children("span").stop().fadeTo(500, 1);
}, function(){
$(this).children("span").stop().delay(0).fadeOut(200);
$(this).children("img").stop().delay(0).fadeTo(500, 1);
});
// End $(this)
});
});
$(document).ready(function () {
$("[rel=tooltip]").tooltip({
placement: 'bottom',
});
$("[rel=popover]").popover();
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Tyler Bailey">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="shortcut icon" href="/favicon.ico" />
{% load staticfiles %}
{% block addl_styles %}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/network.style.css" />
{% endblock %}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}libs/jquery.bxSlider.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}libs/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}libs/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/hirestarts.script.js"></script>
</head>
<body>
<div id="wrapper">
<header>
{% include 'includes/nav.html' %}
</header>
<div class="contentContainer">
{% block content %}
{% endblock %}
It's mainly the jquery-ui that I am worried about as of right now, but I don't understand why the CSS would load, and I can view all files in the /static/ folder but the JS won't work?
2 answers
solution1
2 2012-09-11 04:13:58
One obvious issue is that you are calling jQuery functions before actually loading jQuery. To resolve this, move all your script loading calls before your in-line javascript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}libs/jquery.bxSlider.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}libs/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}libs/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/hirestarts.script.js"></script>
solution2
0 2017-11-16 16:39:52
I had the same kind of problem with a Django project. Seems that Chrome just won't fetch the files when you refresh the page, it loads them from cache instead.
If you open debug in Chrome and look up the static file you miss - for me - it was actually there, but with an earlier version of code inside. If you right-click on it to open in new tab it shows its up-to-date content.
So, for me, a Cmd + Shift + R in Chrome did the magic.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.