jquery interferes with each other

[mogoh]

Hello.

I am trying to use django autocomplete light in my project. The Problem is, that I get TypeError: $(...).select2 is not a function error. This is not an unknown error as it seems.

I do not use grappelli and I load dal and dal_select2 before django.contrib.admin.

I guess the ckeditor app is causing some problems, because at one point where I did not use it dal worked.

CK Editor has an option to set the jquery url and i have set it to: CKEDITOR_JQUERY_URL = 'core/scripte/jquery.min.js'

Is there a setting to avoid conflict?

Also I guess that there will be a ton of other apps with the same type of conflict. It would be really nice if there were a solution where this all and the order of loaded apps would not matter. But I guess you already know.

Versions

Django==1.8.16 django-autocomplete-light==3.2.1 Python 2.7.12

[jpic]

That's because you load select2 on a jquery, then load another jquery, which overwrites the previous one.

The fix is to load only one jquery.

[mogoh]

How do I do that?

[jpic]

Not sure I don't use grapelli but search issues I think some people did it

Le 10 avr. 2017 5:13 PM, "Mogoh Viol" notifications@github.com a écrit :

How do I do that?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/yourlabs/django-autocomplete-light/issues/831#issuecomment-292980538, or mute the thread https://github.com/notifications/unsubscribe-auth/AAFxrIA7BRzSoGqwwsVIDJhBQ1pYlv4Aks5rukctgaJpZM4M45vX .

[mogoh]

As I said, I do NOT use grapelli.

[jpic]

Check your HTML source code, find jquery.js loads come from in your templates.

This is not really a DAL issue, perhaps you'd have more luck making a stackoverflow post, in which case you'll include your templates, forms, html outputs, etc, etc .... in short: everything needed to diagnose for you where the double jquery loading comes from. In this case, please post the link to your question here ;)

[mogoh]

I think it is a DAL issue. Here is why:

I use among other things image croping and ck editor. Both have a config for a jquery link. If i set

IMAGE_CROPPING_JQUERY_URL = None
CKEDITOR_JQUERY_URL = None

then DAL works without a problem. But if I set one of the links to a jquery source then DAL stops working. (And I get the TypeError: $(...).select2 is not a function error). Why can get image cropping and ck editor get jquery-wise along, but not DAL? That sounds like a DAL problem.

[jpic]

It's would be a dal problem if only dal was doing any jQuery loading, and thus cause conflicts. But dal doesn't load jQuery and delegates that responsibility to the user. If it's really a dal problem then it should be easy for you to reproduce it in the test project.

Dal is able to load on the jQuery that the admin provides. Then, your other apps declare a new, jQuery, and the old one with select2 loaded is discarded.

How exactly would dal be supposed to prevent this situation ?

Perhaps we could use something else than $ ?

[mogoh]

Ah, I understand.

I found the following a bit strange.

# in this case DAL works
JQUERY_URL = None
# In this case DAL does not work
JQUERY_URL = 'js/jquery.js'
# In this case DAL also does not work!
# I tell the other extensions to use the admin/js/jquery.js
# As you say it is the same jquery that DAL uses.
# I don't understand why.
JQUERY_URL = 'admin/js/jquery.js'

Perhaps we could use something else than $ ?

To be honest I am not a js developer so I don't know what $ means in this case.

[jpic]

$ is the default global variable name that holds the jQuery instance.

If you're in <3 with code, then does the language really matter ? I hope to have a beer together and discuss this in length :guitar:

It doesn't matter what you are not, what matters is what you are, at least for me <3

[mogoh]

So if I understand this right, jquery defines a function, called $. And dal adds a "subfunction" to $ called $(...).select2. But this only works because dal controlles the loading of jquery in static/admin/js/jquery.init.js. And if an onther jquery lib gets loaded $ gets overridden and dal stops working.

[jpic]

Let me just correct a few of your conclusions:

• dal does not configure $.select2: select2's script does
• dal does not load jquery, you are, sorry for repeating myself and looking like a broken record.

So, your solution is to:

• just load jquery where you want,
• make sure it is loaded before you render the form's media.
• don't load it twice.

[mogoh]

Thank you for your patience. I have asked the Question over at StackOverflow. I will post a solution if I find one.

[jpic]

I don't understand, why don't you leave JQUERY_URL = None?

[mogoh]

I don't understand, why don't you leave JQUERY_URL = None?

That's what I do. But i think that is only half of the work.

• I don't know, which plugin uses jQuery and if another plugin hose dal because it loads jQuery of its own. To be sure that dal works everywhere, I need to take care that no other plugin loads jQuery.
• I don't know that, if every where I need jQuery, it will be loaded, if I set the variable JQUERY_URL = None. After all the plugins need jQuery and if I unset the variable and jQuery won't get loaded in this way, it needs to be loaded another way.

I hoped that I could just set JQUERY_URL = "js/jquery.js" and every plugin would use the same jQuery without a problem. So I will go through my plugins and configure them to not load jQuery and load jquery via template if necessary.

[jpic]

I don't know, which plugin uses jQuery and if another plugin hose dal because it loads jQuery of its own. To be sure that dal works everywhere, I need to take care that no other plugin loads jQuery.

That is exactly why DAL doesn't load jQuery at all: to not break other plugins.

I hoped that I could just set JQUERY_URL = "js/jquery.js" and every plugin would use the same jQuery without a problem. So I will go through my plugins and configure them to not load jQuery and load jquery via template if necessary.

What do you think you problem would be like if other plugins did the same as DAL, which is, not mess with how you want to load jQuery ?

I don't know that, if every where I need jQuery, it will be loaded, if I set the variable JQUERY_URL = None. After all the plugins need jQuery and if I unset the variable and jQuery won't get loaded in this way, it needs to be loaded another way.

You probably need anywhere you are rendering a form.

I fail to consider this as broken or as something I need to fix, but pull requests that could improve the situation are welcome !