Django 静态 JS 文件未加载答案

【问题标题】：Django Static JS Files Not LoadingDjango 静态 JS 文件未加载
【发布时间】：2012-09-03 21:58:47
【问题描述】：

我正在处理一个 django 项目，总的来说，我对 Django 和 Python 还是很陌生。我制作了一个简单的模板，在 base.html 文件中调用了我所有的 css 和 js 文件，而我使用{% content block %} 来填写模板。

正在调用所有的 css 文件，以及所有的 js 文件。我可以通过输入 /http://myurl://static/jsfile.js 来查看它们。 CSS 文件也在我的 html 文档中工作。唯一不起作用的是任何 javascript，甚至不是嵌入式 javascript。

这是我的 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/',
)

这是我的 urls.py

# 网站网址

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

这是我的这里是我的base.html（它有点长，我尽可能地切断了）

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

我现在担心的主要是jquery-ui，但我不明白为什么CSS会加载，我可以查看/static/文件夹中的所有文件但是JS不起作用?

【问题讨论】：

当您说它不会加载时，您的意思是您使用诸如 firebug/django 控制台/chrome 开发者工具之类的东西会出现 404 错误吗？或者你的意思是javascript实际上没有工作？如果您遇到问题，我不会感到惊讶，因为您在实际加载 jquery 本身之前尝试调用 jquery 函数。
那么你的 urls.py 中处理在 STATIC_URL 下提供对象的位在哪里？

标签： python django django-templates

【解决方案1】：

一个明显的问题是您在实际加载 jQuery 之前调用了 jQuery 函数。要解决此问题，请将所有脚本加载调用移至您的内联 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>

【讨论】：

【解决方案2】：

我在 Django 项目中遇到了同样的问题。似乎Chrome在您刷新页面时不会获取文件，而是从缓存中加载它们。

如果您在 Chrome 中打开调试并查找您错过的静态文件 - 对我来说 - 它实际上就在那里，但里面有早期版本的代码。如果您右键单击它以在新选项卡中打开它，它会显示其最新内容。

所以，对我来说，Chrome 中的 Cmd + Shift + R 发挥了作用。

【讨论】：