Django renders only last widget on page [SOLVED]
0xVK opened this issue · 6 comments
Hello. I am trying to use django-autocomplete-light to autocomplete ForeignKey select. But I have a few fields on my page, and autocomplete.ModelSelect2 widget renders only for last Select field.
All other fields except the last one has default select, which are empty.
Can someone help to make all other fields to work?
There is no JS console.
One input has (doesn`t work)
<label for="id_teaching_program" class="font-weight-bold">Навчальна програма:</label>
<select name="teaching_program" data-minimum-input-length="2" class="form-control" required="" id="id_teaching_program"
data-autocomplete-light-language="uk" data-autocomplete-light-url="/teaching_program_autocomplete_light_field/"
data-autocomplete-light-function="select2" tabindex="0" aria-hidden="false">
<option value="" selected="">---------</option>
</select>
And second one (works)
<label for="id_teaching_program" class="font-weight-bold">Навчальна програма:</label>
<select name="teaching_program" data-minimum-input-length="2" class="form-control select2-hidden-accessible" required=""
id="id_teaching_program" data-autocomplete-light-language="uk"
data-autocomplete-light-url="/teaching_program_autocomplete_light_field/"
data-autocomplete-light-function="select2" data-select2-id="id_teaching_program" tabindex="-1"
aria-hidden="true">
<option value="" data-select2-id="4">---------</option>
<option value="17" selected="" data-select2-id="5">2020 - ОП: 102 Хімія / Хімія | НП: Кристалохімія, Бакалавр №
2.1.1.6
</option>
</select><span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="3"
style="width: auto;"><span class="selection"><span
class="select2-selection select2-selection--single form-control" role="combobox" aria-haspopup="true"
aria-expanded="false" tabindex="0" aria-disabled="false"
aria-labelledby="select2-id_teaching_program-container"><span class="select2-selection__rendered"
id="select2-id_teaching_program-container"
role="textbox" aria-readonly="true"
title="2020 - ОП: 102 Хімія / Хімія | НП: Кристалохімія, Бакалавр № 2.1.1.6">2020 - ОП: 102 Хімія / Хімія | НП: Кристалохімія, Бакалавр № 2.1.1.6</span><span
class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span
class="dropdown-wrapper" aria-hidden="true"></span></span>
Both fields has Django ModelForm:
class Meta:
model = Syllabus
fields = ('teaching_program', 'file', 'file_text', 'authors',
'user', 'is_checked', 'is_confirmed', 'status')
widgets = {'user': HiddenInput(),
......
'teaching_program': autocomplete.ModelSelect2(
url='teaching_program_autocomplete_light_field',
attrs={
'data-minimum-input-length': 2,
}
),
}
There is no JS console.
What is being referred to here is the built-in debugging console for your browser.
For Chrome: click the menu (three vertical dots... at top right); then from the drop-down menu select "More Tools", followed by "Developer Tools". This opens up a split-screen view and allows you to choose different debug tabs. If you choose "Console," and then refresh the page you should see any JavaScript errors that are being raised.
Yes, thank you Derek! Also, I see both select tags have the same value for the name attribute, does it work better when they have different names ? Also maybe the Form.prefix feature would help: https://docs.djangoproject.com/en/3.1/ref/forms/api/#prefixes-for-forms
it works. Thank you!