Django：从基础扩展 jQuery CDN答案

【问题标题】：Django: Extend jQuery CDN from baseDjango：从基础扩展 jQuery CDN
【发布时间】：2016-11-29 23:32:42
【问题描述】：

我以为只要在base.html中包含来自CDN的jQuery，它将在所有扩展基础的html页面中定义，就像从静态文件中包含时一样，无需重复

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

base.html：

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>notifyMe</title>

<!-- Bootstrap -->

<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet"> 
</head>
<body>
<h1>NotifyMe</h1>
{% block main %}
{% endblock %}

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
</body>
</html>

编辑 event_add.html：

{% extends 'base.html' %} 
{% load widget_tweaks %}
{% block main %}
<div class="container">
    <div id="form" class="col-md-6 col-md-offset-3 jumbotron">
        <div class="text-center">
            <h3>New Task</h3>
        </div>
        <form method="POST">
            {% csrf_token %}
            {% for field in form.visible_fields %}
            <div class="form-group row">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                {{field|add_class:'form-control'}}
                {% for error in field.errors %}
                <span class="help-block"> {{ error}} </span>
                {% endfor %}
            </div>
            {% endfor %}
            <div class="form-group">
                <button type="submit" class="btn btn-success">
                <span class="glyphicon glyphicon-ok"></span> Save
                </button>
                <a href="" class="btn btn-default">Cancel</a>
            </div>
       </form>
    </div>
</div>
<script>
$(function() {
            $(".datepicker").datepicker({
                      changeMonth: true,
                      changeYear: true,
                      yearRange: "2016:2020",
                                        });
                    });
</script>
{% endblock %}

直到我在函数脚本之前添加了 CDN 行，我的函数才被识别。

{% extends 'base.html' %} 有限制吗？

【问题讨论】：

不，它没有。你有什么问题？
我一直在与Uncaught TypeError: $(…).datepicker is not a function .. 斗争一段时间，我尝试的最后一件事是再次包含 jQuery。只是想了解有什么区别，以及在使用 CDN 时是否有不重复自己的技巧。
base.html 文件中的哪个位置包含script 标签？将文件的相关部分添加到您的问题中并描述您遇到的问题 - 我 assume 您无法在扩展页面上运行 jQuery？您应该检查浏览器的控制台是否有任何错误消息。
顺序很重要。您应该首先包含 Jquery，然后是 datepicker，然后是使用 datepicker 的自定义脚本。我假设base.html JQuery 包含在页面末尾，而您正试图在上面的某个地方使用它。
@Selcuk 我把它放在顶部它不起作用，现在当添加它<script src='https://code.jquery.com/ui/1.11.4/jquery-ui.js'></script> 它起作用了。为什么？

标签： django cdn

【解决方案1】：

您尝试使用的.datepicker() 插件包含在Jquery-UI 中。我建议您按如下方式重组您的模板（为了清楚起见，删除了不相关的部分）：

base.html

<html lang="en">
    ...
    ...
    {% block main %}
    {% endblock %}

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Consider also adding Bootstrap.js here! -->
    {% block extra_js %}{% endblock extra_js %}
    </body>
</html>

对 HTML 内容使用 main 块，对 Javascript 使用 extra_js 块。这样，您将保证任何用户脚本都将出现在 JQuery 之后。例如：

event_add.html

{% extends 'base.html' %} 
{% load widget_tweaks %}
{% block main %}
<div class="container">
...
...
</div>
{% endblock main %}

{% block extra_js %}
<script src='//code.jquery.com/ui/1.11.4/jquery-ui.js'></scrip‌t>
<script>
$(function() {
   ...
   ...
</script>
{% endblock extra_js %}

【讨论】：