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

[Luciano Martins]

Must be missing the jquery that has to come before select2's js