1

I am trying to create a form which uses two different widgets:

- some fields are using django-automplete-light ModelSelect2 widget
- another field is using bootstrap_datepicker_plus DatePickerInput widget

However, I can't manage to make them both work: when I create a form with DatePickerInput only, the calendar shows correctly, but when I add fields using ModelSelect2, the calendar doesn't popup anymore.

Does anybody know what could cause this problem and how to solve it?

In settings.py I set 'include_jquery' = True for BOOTSTRAP4 Below is an extract of the form code:

from django.forms import ModelForm
from dal import autocomplete
from bootstrap_datepicker_plus import DatePickerInput

class CreateWhoForm(ModelForm):

    class Meta:

        model = m.Who
        fields = (
            'why',
            'how',
            'begins'
        )
        widgets = {
            # when 'why' and 'how' are commented, DatePickerInput() calendar widget shows correctly
            # when they are present, the calendar widget doesn't show anymore
            'why': autocomplete.ModelSelect2(
                url='core:why-autocomplete'
            ),
            'how': autocomplete.ModelSelect2(
                url='core:how-autocomplete'
            ),
            'begins': DatePickerInput()
        }

And some of the html used:

<pre>
{% load static %}
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{{ form.media }}

{% for field in form %}
    <div class="form-group{% if field.errors %} has-error{% endif %}">
    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
    {% render_field field class="form-control" placeholder=field.help_text %}
    {% for error in field.errors %}
       <p class="help-block">{{ error }}</p>
    {% endfor %}
    </div>
{% endfor %}

</pre>
fduf
  • 33
  • 7

1 Answers1

1

I had the same problem and it appears to be an issue with initializing JQuery multiple times. Since you are loading in JQuery with Bootstrap and Autocomplete-light loads in JQuery also, there appears to be a conflict. Deleting static/automplete_light/jquery.init.js appears to fix the problem.

kopeca
  • 26
  • 2
  • What exactly do you mean with deleting `static/automplete_light/jquery.init.js`? This file is part of the pacakge `django-autocomplete-light`. Do you mean the file must be deleted from the package? Or is there a way to configure the package so that it does not try to include this javascript file in the media of the widget? – gogognome Aug 27 '20 at 17:10
  • I literally just deleted that file from the package itself. There may be a way to configure the package itself, but I am not sure. I just needed a quick and dirty solution. – kopeca Aug 28 '20 at 19:22
  • deleting files from the package is not handy if you are working in a team. I actually found a solution: upgrading `django-autocomplete-light`. It turns out that in a newer version than I used jQuery is no longer included by the widget. – gogognome Aug 29 '20 at 18:23