时间戳

首页 > 解决方案 > Django Datepicker和Autocomplete一起使用时不呈现

javascript - Django Datepicker和Autocomplete一起使用时不呈现

问题描述

我正在使用 Django、bootstrap_datepicker_plus 和 django-autocomplete-light。当我分别使用这两个库时我没有任何问题，但是当我尝试以相同的形式使用它们时，由于某种原因，只有自动完成小部件在工作，而日期选择器小部件没有。我不知道为什么，可能是由于库冲突，但有没有解决这个问题的方法？我试图在线搜索，但找不到任何对我有帮助的解决方案。任何帮助表示赞赏和欢迎！

代码如下：

表格.py

class SalesTaskPlaceHolder(forms.ModelForm):
    class Meta:
        model = SalesTask
        fields = ['title', 'description', 'priority', 'status', 'rnd_project', 'salesExtra', 
                  'rndExtra', 'start_date', 'due_date']
        exclude = ['task_id']
        widgets = {
                  'salesExtra': autocomplete.ModelSelect2Multiple(url='sales-extra-autocomplete'),
                  'rndExtra': autocomplete.ModelSelect2Multiple(url='rnd-extra-autocomplete'),
                  'start_date': DatePickerInput(),
                  'due_date': DatePickerInput(),
                  }

    def __init__(self, *args, **kwargs):
        self.id = kwargs.pop('id',None)
        super(SalesTaskPlaceHolder, self).__init__(*args, **kwargs)
        self.fields['title'].widget.attrs['placeholder'] = 'Title of your task'
        self.fields['description'].widget.attrs['placeholder'] = 'What is this task about?'
        self.fields['status'].widget.attrs['placeholder'] = '0-100'
        self.fields['salesExtra'].label = 'Sales Personnel' 
        self.fields['rndExtra'].label = 'RnD Personnel'
        self.fields['rnd_project'].queryset = 
        RndProject.objects.filter(customerRequirement__sales_project=self.id)

视图.py

class SalesExtraAutoComplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        qs = SalesExtra.objects.all()

        if self.q:
            qs = qs.filter(user__username__istartswith=self.q)

        return qs

class TaskCreateView(LoginRequiredMixin, CreateView):
   model = SalesTask
   form_class = SalesTaskPlaceHolder
   template_name = 'rnd/task_create.html'

  def get_form_kwargs(self):
    kwargs = super(TaskCreateView, self).get_form_kwargs()
    kwargs['id'] = self.kwargs['id']
    return kwargs

  def form_valid(self, form):
    project = get_object_or_404(SalesProject, sales_project_id=self.kwargs['id'])
    form.instance.sales_project = project
    return super(TaskCreateView, self).form_valid(form)

  def get_success_url(self):
    return reverse('rnd-projects', kwargs={'id': self.object.sales_project.sales_project_id})

task_create.html

{% extends 'rnd/base.html' %}

{% load static %}
{% load crispy_forms_tags %}

{% block content %}

<link rel="stylesheet" type="text/css" href="{% static 'rnd/test.css' %}">

<form method="POST" id='submitform'> {% csrf_token %}
    {{ form|crispy }}
    <input type="submit" value="Save" id='submitbtn' class='btn w3-teal' />
</form>


<script type="text/javascript">
    $('#submitbtn').click(function() {
        if ($('#id_title').val().length != 0 && $('#id_description').val().length != 0 && 
            $('#id_priority').val().length != 0 && $('#id_status').val().length != 0 && 
            $('#id_start_date').val().length != 0 && $('#id_due_date').val().length != 0) {
                $('#submitbtn').hide();
                $('#submitform').append('<p>Submitting your form now...</p>')
            }
        });
</script>


{{ form.media }}

{% endblock content %}

标签： javascriptpythondjangobootstrap-datepickerdjango-autocomplete-light

解决方案

我遇到过同样的问题。看起来 Autocomplete 和 DatePicker 都在尝试加载 JQuery，这导致多次初始化 JQuery。由于我已经独立加载了 JQuery，我只是从 static/autocomplete_light/ 中删除了 JQuery.init.js 文件。现在一切似乎都在工作。

推荐阅读