Question

我正在使用Django（v2.1.4）制作一个Web应用程序。在我的一个模型中，我有一个“日期”字段，我想使用jquery向其中添加“日期选择器” calander。我无法将jQuery代码正确链接到Django。

以下是相关的代码（如果需要更多，请告诉我）

models.py

class Detail(models.Model):
    study = models.ForeignKey(Study, on_delete=models.CASCADE, related_name='details')
    Location = models.CharField('Detail', max_length=255)
    date = models.DateField('event date', default=datetime.date.today)
    time = models.TimeField('event start time', default=now)
    compensation = models.DecimalField(max_digits=6, decimal_places=2, default=0)
    description = models.TextField(blank=True)

    def __str__(self):
        return self.text

forms.py

class DetailForm(forms.ModelForm):
    class Meta:
        model = Detail
        fields = ('Location', 'date', 'time', 'compensation', 'description', )
        widgets = {
            'date': forms.DateInput(attrs={'class': 'datepicker'})
        }

views.py

@login_required
@educator_required
def detail_add(request, pk):
    study = get_object_or_404(Study, pk=pk, owner=request.user)
    if request.method == 'POST':
        form = DetailForm(request.POST)
        if form.is_valid():
            detail = form.save(commit=False)
            detail.study = study
            detail.save()
            messages.success(request, 'You may now add answers/options to the question.')
            return redirect('educators:detail_change', study.pk, detail.pk)
    else:
        form = DetailForm()

    return render(request, 'classroom/educators/detail_add_form.html', {'study': study, 'form': form})

template base.html

{% load static %}<!doctype html>
<html lang="en">
<head>
  ...
  <link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
  <link rel=”stylesheet” href=”/resources/demos/style.css”>
  <script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
  <script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”>
  </script>
</head>
...
{% block scripts %}
{% endblock %}
{% block scripts %}
{% endblock %}
...

detail_add_form.html

{% extends 'base.html' %}

{% load crispy_forms_tags %}


{% block content %}
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{% url 'educators:study_change_list' %}">My Studies</a></li>
      <li class="breadcrumb-item"><a href="{% url 'educators:study_change' study.pk %}">{{ study.name }}</a></li>
      <li class="breadcrumb-item active" aria-current="page">Add a new detail</li>
    </ol>
  </nav>
  <h2 class="mb-3">Add a new detail</h2>
  <p class="lead">Add first the text of the detail. In the next step you will be able to add the possible answers.</p>
  <form method="post" novalidate>
    {% csrf_token %}
    {{ form|crispy }}
    <button type="submit" class="btn btn-success">Save</button>
    <a href="{% url 'educators:study_change' study.pk %}" class="btn btn-outline-secondary" role="button">Nevermind</a>
  </form>
{% endblock %}

{% block scripts %}
    <script>
    $( function() {
    $( “#id_date” ).datepicker();
    } );
    </script>
{% endblock %}

该表格会加载正确的字段

image of currently rendered form

但是日历不存在，并且出现错误：

Not Found: /educators/study/5/detail/add/”https://code.jquery.com/jquery-1.12.4.js”
Not Found: /educators/study/5/detail/add/”https://code.jquery.com/ui/1.12.1/jquery-ui.js”
[27/Dec/2018 17:54:49] "GET /educators/study/5/detail/add/%E2%80%9Dhttps://code.jquery.com/ui/1.12.1/jquery-ui.js%E2%80%9D HTTP/1.1" 404 4997
[27/Dec/2018 17:54:49] "GET /educators/study/5/detail/add/%E2%80%9Dhttps://code.jquery.com/jquery-1.12.4.js%E2%80%9D HTTP/1.1" 404 4979

将这个jquery添加到我的应用程序的正确方法是什么？

Answer 1

一种方法是- 提取表单日期字段并添加一个父类。您可以通过form.date提取它

在父类的帮助下，找到id_date并调用函数。

确保日期选择类已添加到输入字段中，您可以通过检查元素进行检查。

Answer 2

这只是您的HTML代码的简单错误。

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<link rel=”stylesheet” href=”/resources/demos/style.css”>
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”>

您使用无效的引号”。使用"或'修复404错误。

将Jquery库链接到Django扩展模板时出现问题

2 个答案: