Uncaught TypeError: $s2.select2 is not a function

Question

I'm using symfony2 and trying to work with tetranz/select2entity-bundle.

my layout.html.twig:

'@SBCPlatformBundle/Resources/public/jquery/dist/jquery.min.js'         
            '@SBCPlatformBundle/Resources/public/bootstrap/dist/js/bootstrap.min.js'
            '@TetranzSelect2EntityBundle/Resources/public/js/select2entity.js'

and my XXXType (Form) :

 ->add('fournisseur', Select2EntityType::class, [
        'multiple' => false,
        'remote_route' => 'fournisseur_home',
        'class' => 'SBCPlatformBundle:fournisseur',
        'primary_key' => 'id',
        'text_property' => 'name',
        'minimum_input_length' => 2,
        'page_limit' => 10,
        'allow_clear' => true,
        'delay' => 250,
        'cache' => true,
        'cache_timeout' => 60000, // if 'cache' is true
        'language' => 'fr',
        'placeholder' => 'Choisir ...',
    ])

So i had this error :

main_select2entity_3.js:10 Uncaught TypeError: $s2.select2 is not a function
at HTMLSelectElement.<anonymous> (http://localhost/SBC/web/js/compiled/main_select2entity_3.js:10:13)
at Function.each (http://localhost/SBC/web/js/compiled/main_jquery.min_1.js:2:2861)
at n.fn.init.each (http://localhost/SBC/web/js/compiled/main_jquery.min_1.js:2:845)
at n.fn.init.$.fn.select2entity (http://localhost/SBC/web/js/compiled/main_select2entity_3.js:2:10)
at HTMLDocument.<anonymous> (http://localhost/SBC/web/js/compiled/main_select2entity_3.js:85:48)
at i (http://localhost/SBC/web/js/compiled/main_jquery.min_1.js:2:27151)
at Object.fireWith [as resolveWith] (http://localhost/SBC/web/js/compiled/main_jquery.min_1.js:2:27914)
at Function.ready (http://localhost/SBC/web/js/compiled/main_jquery.min_1.js:2:29707)
at HTMLDocument.J (http://localhost/SBC/web/js/compiled/main_jquery.min_1.js:2:29892)(anonymous function) @ main_select2entity_3.js:10each @ main_jquery.min_1.js:2each @ main_jquery.min_1.js:2$.fn.select2entity @ main_select2entity_3.js:2(anonymous function) @ main_select2entity_3.js:85i @ main_jquery.min_1.js:2fireWith @ main_jquery.min_1.js:2ready @ main_jquery.min_1.js:2J @ main_jquery.min_1.js:2

so any one can help to resolve this problem?

Answer 1

It seems you may be missing some dependency files:

Try putting https://github.com/select2/select2/blob/4.0.0/dist/css/select2.css in web/css

And putting https://github.com/select2/select2/blob/4.0.0/dist/js/select2.js in web/js

Then add both of them to your assetic script:

'@SBCPlatformBundle/Resources/public/jquery/dist/jquery.min.js'
'@SBCPlatformBundle/Resources/public/bootstrap/dist/js/bootstrap.min.js'
'js/select2.js'
'@TetranzSelect2EntityBundle/Resources/public/js/select2entity.js'

And include the styles for it in your template if you want:

<link rel="stylesheet" href="{{ asset('css/select2.css') }}" />

Then run php app/console assets:install again and see if that works