Hi all!
I've been losing hair trying to figure out why a ModelSelect2 field works
on one ModelForm but not the other almost identical one. Please save me
from going mad!
In the browser's console, I'm getting the error message:
jQuery.Deferred exception: $(...).select2 is not a function TypeError:
$(...).select2 is not a function
at HTMLSelectElement.<anonymous>
(http://localhost:8000/static/autocomplete_light/select2.js:102:17)
at HTMLDocument.dispatch
(https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:41772)
at HTMLDocument.y.handle
(https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:39791)
at Object.trigger
(https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:69551)
at HTMLSelectElement.<anonymous>
(https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:70146)
at Function.each
(https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:2573)
at w.fn.init.each
(https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:1240)
at w.fn.init.trigger
(https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:70122)
at HTMLSelectElement.initialize
(http://localhost:8000/static/autocomplete_light/autocomplete.init.js:47:20)
at Function.each
(https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:2573)
undefined
w.Deferred.exceptionHook @ jquery.min.js:2
c @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
_ @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: $(...).select2 is not a function
at HTMLSelectElement.<anonymous> (select2.js:102)
at HTMLDocument.dispatch (jquery.min.js:2)
at HTMLDocument.y.handle (jquery.min.js:2)
at Object.trigger (jquery.min.js:2)
at HTMLSelectElement.<anonymous> (jquery.min.js:2)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at w.fn.init.trigger (jquery.min.js:2)
at HTMLSelectElement.initialize (autocomplete.init.js:47)
at Function.each (jquery.min.js:2)
1. I've tried using the same ModelChoiceField as below on another
ModelForm and it worked perfectly.
2. if I remove the ModelChoiceField for the referred_from field, the field
displays ok with a normal dropdown for choices.
3. if I leave the ModelChoiceField for the referred_from field as it is
below, the field will show up with only one selectable choice ("----").
My non-working code:
forms.py
class CustomerEntryForm(ModelForm):
referred_from =
forms.ModelChoiceField(queryset=ReferredFrom.objects.all(),
widget=autocomplete.ModelSelect2(url='referred-from-autocomplete', attrs={
'data-placeholder': 'Search...',
}))
class Meta:
model = Customer
widgets = {
'notes': forms.Textarea(attrs={'rows': 2, 'cols': 30}),
}
fields = ['referred_from', 'nickname', 'first_name', 'last_name',
'home_address', 'birthdate', 'phone', 'email', 'notes', 'ID1', 'ID2',
'DOC1', 'DOC2']
views.py:
def customer_new(request, representative):
rep_obj = Representative.objects.get(alias=representative)
if request.method == "POST":
form = CustomerEntryForm(request.POST, files=request.FILES)
if form.is_valid():
instance = form.save(commit=False)
instance.entered_by_rep = rep_obj
instance.save()
return redirect('customer_details', pk=instance.id)
else:
form = CustomerEntryForm()
return render(request, 'transactions/customer_new.html', {'form': form})
customer_new.html:
{% extends 'base.html' %}
{% load static %}
{% block content %}
{{ form.media }}
<div>
<h1>Nouveau Client / New Customer<br></h1>
<form method="POST" class="transaction-form"
enctype='multipart/form-data'>
{% csrf_token %}
<table class="table table-striped">
{{ form.as_table }}
</table>
<input type="submit" class="btn btn-primary btn-block" value="Save" >
</form>
</div>
{% endblock %}
This template works (the view and ModelForm class are pretty much
identical):
{% extends "base.html" %}
{% load static %}
{% block content %}
{% if form.errors %}
{% for field in form %}
{% for error in field.errors %}
<div class="alert alert-danger">
<strong>{{ error|escape }}</strong>
</div>
{% endfor %}
{% endfor %}
{% for error in form.non_field_errors %}
<div class="alert alert-danger">
<strong>{{ error|escape }}</strong>
</div>
{% endfor %}
{% endif %}
{{ form.media }}
<div style="margin: 0px 0px 70px 0px;">
<h1>ATM Balance Transaction</h1>
<form method="POST" class="transaction-form">
{% csrf_token %}
<table class="table table-striped">
{{ form.as_table }}
</table>
<input type="submit" class="btn btn-primary btn-lg btn-block"
value="Save">
</form>
</div>
{% endblock %}
Thanks in advance for you help
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-users/7cb4e706-f229-4ada-9239-3dc09e5e0b56o%40googlegroups.com.
