【问题标题】：Jquery isn't working in djangoJquery 在 django 中不起作用
【发布时间】：2016-05-18 06:58:22
【问题描述】：

当我单击日期字段时，它什么也不显示。我已经在 chrome 和 firefox 中对其进行了测试。但它不起作用

models.py

class ProfileEditForm(forms.ModelForm):
class Meta:
    model = Profile
    fields = ('date_of_birth', 'photo')
    widgets = {'date_of_birth' : forms.DateInput(attrs={'class':'datepicker'})}

html

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    <link href="{% static "css/base.css" %}" rel="stylesheet">
    <script>
        $(document).ready(function() {
            $('.datepicker').datepicker();
        });
    </script>

【问题讨论】：

你能检查你的控制台是否有任何错误吗？
没有错误，但显示如下：18/May/2016 07:14:41] "GET /account/edit/ HTTP/1.1" 200 2792 [18/May/2016 07:14: 41]“GET /static/css/base.css HTTP/1.1”304 0 @dreamweiver
@JagdeepSidhu 上面的评论是关于浏览器控制台的，而不是命令行输出。如果 Javascript 有问题，浏览器应该会给你错误。
它表明 $().datepicker 不是函数@achedeuzot

标签： jquery html django

【解决方案1】：

您看过浏览器控制台吗？那里有错误吗？

看起来您的class Meta 与class ProfileEditForm 的缩进相同，这不好。 class Meta 需要在 class ProfileEditForm 内缩进，否则更改将不会被考虑在内。像这样：

class ProfileEditForm(forms.ModelForm):

    class Meta:  # <=== Indent this
        model = Profile
        fields = ('date_of_birth', 'photo')
        widgets = {'date_of_birth' : forms.DateInput(attrs={'class':'datepicker'})}

【讨论】：

"TypeError: $(...).datepicker is not a function" 显示在控制台
@JagdeepSidhu：看看 Tarun Behal 的回答。那可能是适合您的。

【解决方案2】：

<script>
    $(document).ready(function() {
        $('.datepicker').datepicker();
    });
</script>

假设您的日期选择器不工作，您已经在该元素被渲染之前初始化了$('.datepicker')。将此脚本标签移动到正文标签的结尾之前，您就可以开始了。也不包括 datepicker 库。

【讨论】：

以及如何加载这个日期选择器库
检查这个库cdnjs.com/libraries/jquery-datetimepicker的cdn链接。将这些包含在 head 部分中。

【解决方案3】：

加载页面后，尝试在浏览器的控制台中运行它 $('.datepicker').datepicker(); 如果这有助于显示日期字段，则意味着 datepicker 工作正常，您只需在 body 标记末尾添加 datepicker 脚本。

现在，添加 datepicker.js 或您需要添加的任何其他 javascript 文件

class Media: js = ('[path to you js file/filename.js]',)

到admin.py中的“ProfileEditForm”方法

注意：还要确保没有 jQuery 文件被多次链接。它们也可能造成问题。

【讨论】：