"Uncaught TypeError: $element.select2 is not a function" after upgrading Django from 2.0.13 to 3.2.17 #209
Description
We're using the HeavySelect2Widget widget in a django admin form to have a select field that queries data from another service (so autocomplete_fields is not a viable option), and this has been working fine, however after this service was upgraded from Django 2.0.13 to Django 3.2.17 we get this error in the JavaScript when loading the page:
Uncaught TypeError: $element.select2 is not a function
This seems to be a similar issue to applegrew#586 and django-cms/djangocms-link#180 but I'm not using Django CMS, just admin. I tried adding a custom widget that inherits from HeavySelect2Widget in order to set custom media, but I'm not sure what the js should be set to:
class MyHeavySelect2Widget(HeavySelect2Widget):
class Media:
js = [
"admin/js/jquery.js",
]
class ContractInstanceForm(forms.ModelForm):
site_uid = forms.ChoiceField(
widget=MyHeavySelect2Widget(data_url="/contracts/site/search/")
)The resulting HTML looks like this
<head>
<title>pactman | Add Trading Contract</title>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/app.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/nav_sidebar.css">
<script src="/static/admin/js/nav_sidebar.js" defer=""></script>
<link href="//fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="icon" href="/static/images/cropped-favicon-43x43.png" sizes="32x32">
<link rel="icon" href="/static/images/cropped-favicon-300x300.png" sizes="192x192">
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/pactman/jsi18n/"></script>
<link href="/static/admin/css/vendor/select2/select2.min.css" type="text/css" media="screen" rel="stylesheet">
<link href="/static/django_select2/django_select2.css" type="text/css" media="screen" rel="stylesheet">
<script src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script src="/static/admin/js/vendor/select2/select2.full.min.js"></script>
<script src="/static/admin/js/calendar.js"></script>
<script src="/static/admin/js/jquery.init.js"></script>
<script src="/static/django_select2/django_select2.js"></script>
<script src="/static/admin/js/admin/DateTimeShortcuts.js"></script>
<script src="/static/admin/js/core.js"></script>
<script src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script src="/static/admin/js/actions.js"></script>
<script src="/static/admin/js/urlify.js"></script>
<script src="/static/admin/js/prepopulate.js"></script>
<script src="/static/admin/js/vendor/xregexp/xregexp.js"></script>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/admin/css/responsive.css">
<meta name="robots" content="NONE,NOARCHIVE">
</head>Changing the order to the script tags seems to fix the issue, but I don't how to make that permanent.
I'm sorry about the mistaken early submission, this is my first issue I've raised.