Skip to content

Fix jQuery preference order to prevent conflicts with third-party widgets#354

Merged
codingjoe merged 1 commit into
codingjoe:mainfrom
marcelo-maldonado95:fix-jquery-preference-order
Dec 15, 2025
Merged

Fix jQuery preference order to prevent conflicts with third-party widgets#354
codingjoe merged 1 commit into
codingjoe:mainfrom
marcelo-maldonado95:fix-jquery-preference-order

Conversation

@marcelo-maldonado95

Copy link
Copy Markdown

Problem

When using django-select2 with Django admin (Grappelli or standard), other widgets
that load their own jQuery (like PrettyJSONWidget, JSONEditor, django-summernote, etc.)
can overwrite the global jQuery variable.

Since django_select2.js currently prefers jQuery over window.django.jQuery: ```javascript factory(jQuery || window.django.jQuery)

It uses the newly loaded jQuery instance which doesn't have Select2 attached, causing: $element.select2 is not a function

Solution

Reverse the preference order to use Django's protected jQuery instance first: factory(window.django.jQuery || jQuery)

This ensures Select2 functionality works regardless of what other widgets do to the global jQuery variable.

Related

This complements Fix #292 which ensures proper JS media loading order. That fix controls django-select2's own loading order, but can't prevent third-party widgets from loading jQuery afterward.

…gets

When other Django admin widgets (like PrettyJSONWidget, JSONEditor, etc.)
load their own jQuery, they overwrite the global `jQuery` variable. Since
django_select2.js prefers `jQuery` over `window.django.jQuery`, it ends up
using the newly loaded jQuery instance which doesn't have Select2 attached.

This causes "$element.select2 is not a function" errors on admin pages.

By preferring `window.django.jQuery` (Django's protected instance), we ensure
Select2 functionality works regardless of what other widgets do to the global
jQuery variable.
@codecov

codecov Bot commented Dec 15, 2025

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 48.73%. Comparing base (f61b09c) to head (6b63c54).
⚠️ Report is 54 commits behind head on main.

❗ There is a different number of reports uploaded between BASE (f61b09c) and HEAD (6b63c54). Click for more details.

HEAD has 12 uploads less than BASE
Flag BASE (f61b09c) HEAD (6b63c54)
13 1
Additional details and impacted files
@@             Coverage Diff             @@
##             main     #354       +/-   ##
===========================================
- Coverage   98.21%   48.73%   -49.48%     
===========================================
  Files           7        7               
  Lines         280      277        -3     
===========================================
- Hits          275      135      -140     
- Misses          5      142      +137     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@codingjoe

Copy link
Copy Markdown
Owner

Hi @marcelo-maldonado95 👋,

intersting… yes, that is the better default. Let's ship it!

Best,
Joe

@codingjoe codingjoe merged commit 2e2f7f2 into codingjoe:main Dec 15, 2025
10 of 20 checks passed
@Digenis

Digenis commented Dec 16, 2025

Copy link
Copy Markdown

django doesn't vendor jquery in the default setup
but in django.contrib.admin
so wherever django's jquery is mentioned, it's actually django admin's jquery.

window.django is undefined when the django admin app is not enabled
and this release breaks such django setups.

So the selection syntax, even before this PR,
should have anticipated an undefined window.django:
window.django?.JQuery || JQuery, or, for older browser compatibility,
window.django && window.django.JQuery || JQuery

This is enough to fix setups without django admin enabled
which is probably the majority of setups broken by 8.4.4.

I think the above notes should be enough to justify another bugfix release.


I separate these notes because I didn't reach a conclusion or a suggestion.

I agree with this PR that django_select2 shouldn't rely on the global jquery by default
and even those 3rd party widgets mentioned also shouldn't
but they are not the only ones including jquery.
E.g. since I don't use django admin
I pull it from npm and deliver it using the staticfiles app
and I'm probably not the only one.

For anyone using at the same time django admin
and select2 with a different jquery build
the above suggestion in the previous section doesn't fix it.

Any automatic choice is fragile.
Allowing multiple namespaces for jquery
creates a problem similar to a dependency hell.

I can't think off the top my head of a clean way to add a setting for the choice of namespace
and I can't tell if it's worth the effort.

codingjoe added a commit that referenced this pull request Dec 16, 2025
@codingjoe

codingjoe commented Dec 16, 2025

Copy link
Copy Markdown
Owner

Thanks @Digenis excellent point. Sorry that I missed that. I released a patch using optional chaining. It's baseline "widely available", I don't see an issue with that.


Hm… I'd love to switch to something that uses ESM dependencies. Sadly, Select2 doesn't see many updates these days. If you have an idea for another library or want to co-author one, please let me know.

@codingjoe

Copy link
Copy Markdown
Owner

This is causing regression outside the admin and will be reversed with the next bugfix release. Sorry @marcelo-maldonado95, please see ticket #366 for more information.

@marcelo-maldonado95

Copy link
Copy Markdown
Author

This is causing regression outside the admin and will be reversed with the next bugfix release. Sorry @marcelo-maldonado95, please see ticket #366 for more information.

Understood, no problem. Thanks for the heads up!

@Digenis

Digenis commented Feb 20, 2026

Copy link
Copy Markdown

Hm… I'd love to switch to something that uses ESM dependencies. Sadly, Select2 doesn't see many updates these days. If you have an idea for another library or want to co-author one, please let me know.

Sorry for the late reply.

I'm not familiar with es modules.
I'm also looking for well maintained alternatives to select2.
Choices.js seems well maintained but without a django integration.

But, there have been numerous new standards since select2 development stalled
and maybe even vanilla js can suffice now,
especially if the focus is restricted to "Heavy widgets".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

i18n is broken due to missing jQuery import in media 🐛

3 participants