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?

when you say that it won't load, do you mean that you get a 404 error with something like firebug/django console/chrome developer tools? Or do you mean that the javascript isn't actually working? I wouldn't be surprised if you are having issues, because you are trying to call jquery functions before actually loading jquery itself. — Jeff Tratner
– Jeff Tratner, Commented Sep 11, 2012 at 4:08
So where's the bit in your urls.py that deals with serving the objects under STATIC_URL? — Daniel Roseman
– Daniel Roseman, Commented Sep 11, 2012 at 9:06

Jeff Tratner · Accepted Answer · 2012-09-11 04:13:58Z

2

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>

answered Sep 11, 2012 at 4:13

Jeff Tratner

17.3k4 gold badges50 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ton Marton · Accepted Answer · 2017-11-16 16:39:52Z

0

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.

answered Nov 16, 2017 at 16:39

Ton Marton

236 bronze badges

Collectives™ on Stack Overflow

Django Static JS Files Not Loading

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related