django-autocomplete-light icon indicating copy to clipboard operation
django-autocomplete-light copied to clipboard

cannot use select2 on grappelli admin dashboard

Open amirarsalan opened this issue 9 years ago • 37 comments

Hi,

I used from autocomplete light in grappelli dashboard but i got this error when load page, Uncaught TypeError: $(...).select2 is not a function select2.js:8!!!!

how can i fix this?!

amirarsalan avatar Feb 25 '16 00:02 amirarsalan

Looks like a JS loading issue, we should have a settings file with grappeli support in the test_project, and we'd be able to run our functional test suite on it, parhaps @mpasternak would be interrested in helping ?

jpic avatar Feb 26 '16 12:02 jpic

For me the same issue using standard admin. In particular without indicating any jquery in admin class I have

Select2: An instance of jQuery or a jQuery-compatible library was not found. Make sure that you are including jQuery before Select2 on your web page.

paxelito avatar Jun 06 '16 13:06 paxelito

If you move it like this: 'dal', 'dal_select2', 'dal_queryset_sequence', 'grappelli', it works, at least for me!

chubz avatar Jul 25 '16 16:07 chubz

Oh, perhaps you could submit an update on http://django-autocomplete-light.readthedocs.io/en/master/install.html#install-in-your-project ?

jpic avatar Jul 26 '16 11:07 jpic

I've created a PR #721

chubz avatar Jul 27 '16 15:07 chubz

I'm using the default Django admin and I'm getting the same issue. I'm following the documentation to show a ModelSelect2Multiple - I can get the form to show, but I get the error that the OP mentions.

I also get select2.full.js:473 Select2: An instance of jQuery or a jQuery-compatible library was not found. Make sure that you are including jQuery before Select2 on your web page. - I can solve this with the code below in the admin class...

class Media:
        js = (
            'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
        )

... but I don't think this is the solution. The installed apps layering does not do the trick either and I continue receiving the same error as the OP.

I've ran collectstatic with no luck. I'm guessing I need to load the jQuery file before the select2 based on other answers I've seen on StackOverflow.

Has anybody seen something like this before? Django 1.9.2/DAL 3.1.8

carmichaelalonso avatar Aug 30 '16 21:08 carmichaelalonso

@carmichaelalonso can you check your jquery.init.js? There is such a file defined and collected from grappelli. There is also such a file defined by dal I think. Check network (resources loaded) in your dev tools and find it. There maybe more then one. Check them against: https://github.com/yourlabs/django-autocomplete-light/blob/master/src/dal/static/admin/js/jquery.init.js if yours looks like: https://github.com/sehmaschine/django-grappelli/blob/master/grappelli/static/admin/js/jquery.init.js then it has been collected before you switched apps or added django autocomplete light. If you can clear (delete) static and run collectstatic again, if not try clearing that file while dal is defined above grappelli.

I hope it helps, I ran across this issue on staging server today and lost couple of hours!

chubz avatar Aug 30 '16 22:08 chubz

@chubz thanks! That did the trick. My jquery.init.js looked like:

var yl = yl || {};

if (yl.jQuery === undefined) {
    if (typeof django !== 'undefined')
        yl.jQuery = django.jQuery;

    else if (typeof $ !== 'undefined')
        yl.jQuery = $;
}

I had to manually change this for it to work (and this was installed from the pip package). I'll have a look to see if I can get the right jquery.init.js loading before I push to production.

carmichaelalonso avatar Aug 31 '16 21:08 carmichaelalonso

I think I found out what was happening.

Grappelli's project replaces the admin/js/vendor/jquery files from the original django when you collectstatic See that here

I had to manually replace django's own jQuery files in order to get jQuery to load.

sonarun avatar Sep 02 '16 19:09 sonarun

I also run into the same error. How is it done? Copy the jquery.js after collect static ?

cesarho avatar Sep 10 '16 14:09 cesarho

I manually copied the jquery.js file after collectstatic and it did the trick. Since Grappelli's own files are collected after DAL, they are copied over what DAL uses, at least that's what I assume.

sonarun avatar Sep 10 '16 14:09 sonarun

Thanks. I got it working. Do you have the issue that the input box can only clickable when the mouse if point at the bottom line only?

cesarho avatar Sep 10 '16 16:09 cesarho

Yes, I think I know exactly what is happening. The click box is hidden underneath another field. Check the z-index.

I brought a similar issue up in Grappelli and they just committed the fix. I think my fix also fixed the issue you are having. I can't remember exactly.

sehmaschine/django-grappelli#775

sonarun avatar Sep 10 '16 16:09 sonarun

Wow. Your fix exactly solved the problem. Thank you very much~~

cesarho avatar Sep 10 '16 16:09 cesarho

Should the dal packages include the jquery in the statics file, then everything should be easy for deployment?

cesarho avatar Sep 11 '16 01:09 cesarho

@cesaro I thought it was fixed upstream ?

On Sep 11, 2016 3:59 AM, "cesarho" [email protected] wrote:

Should the dal packages include the jquery in the statics file, then everything should be easy for deployment?

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

jpic avatar Sep 11 '16 09:09 jpic

Hello James,

I think you wanted to write to @cesarho and not @cesaro (me)?

César

On Sun, Sep 11, 2016 at 11:30 AM, James Pic [email protected] wrote:

@cesaro I thought it was fixed upstream ?

On Sep 11, 2016 3:59 AM, "cesarho" [email protected] wrote:

Should the dal packages include the jquery in the statics file, then everything should be easy for deployment?

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

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/yourlabs/django-autocomplete-light/issues/602#issuecomment-246170928, or mute the thread https://github.com/notifications/unsubscribe-auth/AAIyaZK70jvb7Y-hipjra891Lrkzqtlhks5qo8o5gaJpZM4HiRRf .

cesaro avatar Sep 12 '16 10:09 cesaro

James, yes the issue is solved. I have copied the jQuery in the DAL static files so that it can copy to /static during collect statics.

cesarho avatar Sep 12 '16 12:09 cesarho

There should be a better fix.

jpic avatar Sep 12 '16 12:09 jpic

Hi everyone,

Just for other which have this same JS error (without grapelli for me) : to fix the issue, drop the static dir before collecting it.

I think the same error should happen with grappelli and the collectstatic command itself show us the fix :

Found another file with the destination path 'admin/js/jquery.init.js'. It will be ignored since only the first encountered file is collected. If this is not what you want, make sure every static file has a uniq ue path.

However, I didn't understand that if the file was previously collected, it won't be override. So even if INSTALLED_APPS is correctly sorted, the command won't override the previous admin/js/jquery.init.js from django.contrib.admin (or grapelli).

By removing the file copied in static dir (or dropping the static dir itself), the next collectstatic will properly copied the first one admin/js/jquery.init.js founded, which is the one from dal due to ordering of the setting INSTALLED_APPS.

At least for me, it fix this issue.

I'm not sure we could easily fix it, but we could add some note in install doc? For example:

  1. add dal and dal_select2 in the top of the INSTALLED_APPS
  2. drop your collected static dir (or at least admin/js/jquery.init.js)
  3. collect static file python manage.py collectstatic

Just in case, check that your served jquery.init.js is the one from dal.

Hope it could help.

ychab avatar Nov 16 '16 12:11 ychab

Having issues due to a commit a few months ago in grappelli:

https://github.com/sehmaschine/django-grappelli/commit/45cfd42b7652caadb040041d6cd05d8108ae428a

If I'm not mistaken it seems grappelli is now providing it's own jQuery and overwriting the admin's completely, calling noConflict itself and removing the global jQuery.

If the goals of dal are:

  • A) to be completely standalone, resilient to other apps, and not reliant on admin

  • B) not modify Select2's source

Would it make sense to include, noConflict(), and namespace it's own jQuery? If wanted add a setting to use admin's namespaced django.jQuery? (not withstanding API differences and current calls to a global jQuery)

topher86 avatar Jan 25 '17 03:01 topher86

@topher86 Agreed, looking forward to review a patch !

:guitar:

jpic avatar Jan 25 '17 10:01 jpic

@ychab mine is working correctly, but I'm wondering if this warning when running collectstatic:

Found another file with the destination path 'admin/js/jquery.init.js'. It will be ignored since only the first encountered file is collected. If this is not what you want, make sure every static file has a uniq ue path.

Is expected to run every time, or if it goes away when I have it configured correctly.

Thanks

whieronymus avatar Feb 08 '17 16:02 whieronymus

It's expected until we have a better proposal.

jpic avatar Feb 08 '17 17:02 jpic

@whieronymus : yes, like @jpic says, Django will always output this warning (conflict between two path files). Because this is a temporary fix, you just have to ignore this warning once you have made the changes

ychab avatar Feb 10 '17 11:02 ychab

Perhaps something can be done in the docs to help users understand this better ?​

jpic avatar Feb 10 '17 13:02 jpic

@jpic :+1:

ychab avatar Feb 10 '17 15:02 ychab

Hi, using Django 1.8

Change the code in:

FILE:

select2.full.js

LINE: 8

Add this code at the beginning of the file

var $ = django.jQuery;

LINE: 470

old code in file

var _$ = jQuery || $;

New code in File

var _$ = jQuery || $ || django.jQuery;

no aplicts

./manage.py collectstatic

teofanesp12 avatar Feb 23 '17 20:02 teofanesp12

That a palliative solution, we need a preventive one.

Le 23 févr. 2017 9:40 PM, "Enrique Paz" [email protected] a écrit :

Hi, using Django 1.8 Change the code in: FILE:

select2.full.js LINE: 8

Add this code at the beginning of the file

var $ = django.jQuery;

LINE: 470

old code in file

var _$ = jQuery || $;

New code in File

var _$ = jQuery || $ || django.jQuery;

no aplicts

./manage.py collectstatic

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

jpic avatar Feb 24 '17 20:02 jpic

@enriquep12 should it be done in the select2.full.js in the site-packages or in the static files folder?

sassanh avatar Jun 02 '17 17:06 sassanh