ModelSelect2 field doesn't appear

[Nathan Duy Le]

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 django-users+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-users/7cb4e706-f229-4ada-9239-3dc09e5e0b56o%40googlegroups.com.