2012-09-11 230 views
0

我有一個Django項目,我正在努力,我對Django和Python一般都很新。我製作了一個簡單的模板,在base.html文件中調用了所有的css和js文件,而我使用{% content block %}來填充模板。Django的靜態JS文件不加載

所有的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

#站點URL

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不起作用?

+0

當你說它不會加載,你的意思是你得到一個類似firebug/django console/chrome開發者工具的404錯誤?或者你的意思是說,JavaScript實際上不工作?如果您遇到問題,我不會感到驚訝,因爲您在實際加載jquery本身之前試圖調用jquery函數。 –

+0

那麼,您的urls.py中的哪個位處理STATIC_URL下的對象呢? –

回答

0

一個明顯的問題是,您實際加載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> 
0

我有同樣的問題與一個Django項目。似乎Chrome在刷新頁面時不會獲取文件,而是從緩存中加載它們。

如果你在Chrome中打開調試並查找你錯過的靜態文件 - 對我來說 - 它實際上是在那裏,但是裏面有一個較早版本的代碼。如果您右鍵單擊它以在新選項卡中打開,它將顯示其最新內容。因此,對於我來說,在Chrome中一個Cmd + Shift + R做到了神奇。