简体   繁体   English

Django静态JS文件无法加载

[英]Django Static JS Files Not Loading

I have a django project I am working on, and I am pretty new to Django and Python in general. 我有一个我正在研究的django项目,而且我对Django和Python很新。 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. 我有一个简单的模板,我在base.html文件中调用了所有的css和js文件,而我使用{% content block %}来填写模板。

All of the css files are being called, as well as all the js files. 正在调用所有css文件,以及所有js文件。 I can view them by typing in /http://myurl://static/jsfile.js. 我可以通过输入/http://myurl://static/jsfile.js来查看它们。 The CSS files are working in my html document as well. CSS文件也在我的html文档中工作。 The only thing that isn't working is any of the javascript, not even embedded javascript. 唯一不起作用的是任何javascript,甚至是嵌入式javascript。

Here is my settings.py 这是我的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 这是我的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) 这是我的这里是我的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 %}

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

One obvious issue is that you are calling jQuery functions before actually loading jQuery. 一个明显的问题是你在实际加载jQuery之前调用了jQuery函数。 To resolve this, move all your script loading calls before your in-line javascript: 要解决此问题,请在内联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>

I had the same kind of problem with a Django project. 我和Django项目有同样的问题。 Seems that Chrome just won't fetch the files when you refresh the page, it loads them from cache instead. 似乎Chrome在刷新页面时不会获取文件,而是从缓存中加载它们。

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. 如果你在Chrome中打开调试并查找你想念的静态文件 - 对我来说 - 它实际上就在那里,但内部有一个早期版本的代码。 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. 所以,对我来说,Chrome中的Cmd + Shift + R是神奇的。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM