Why do i get "Uncaught TypeError: Cannot read property 'select2' of undefined"?

JavaScript
1

I have a wordpress site, and I have enqued select2.min.js and from what I can see it is loading correctly in the footer. Then I have another js file (app.js) where I put all my jquery/js.

But when i try to Initialize select2 with: $(‘select’).select2(); all jquery/js code below this one stops working and I get the “Uncaught TypeError: Cannot read property ‘select2’ of undefined” in select2.min.js… in the console.

I have no idea why i get this message and how to solve it. The irritating part is it worked before, with the exact same code, but now i upgraded to the latest version (not sure which one i used before) and now i get these problems.

2

Can you post a link or enough code that we can reproduce your error?

3

Can’t really say without code or jsfiddle to look at. Are you sure that everything is loading in the correct order?

It could also be possible that the JS is breaking somewhere prior to the loading of select2.min.js or jquery, preventing the load, but the error message isn’t showing until that point.

HTH,

:slight_smile:

4

here is a fiddle, however here I don’t get the issue, but all the other jquery is there. I am a beginner att js/jquery so it might be lots of issues with my code so feel free to tell me.

On the real site everything below the select2-intialilize (which is at the top of the code) breaks. On the real site i also load flexslider and fastcklick before select2 in the functions file.

wp_enqueue_script( 'flexslider', get_template_directory_uri() . '/js/jquery.flexslider.js', array('jquery'), '', true );
wp_enqueue_script( 'fastclick', get_template_directory_uri() . '/js/fastclick.js', array('jquery'), '', true );
wp_enqueue_script( 'select2', get_template_directory_uri() . '/js/select2.min.js', array('jquery'), '', true );
wp_enqueue_script( 'app', get_template_directory_uri() . '/js/app.js', array('jquery'), '', true );

Let me know if you need to know anything more.

5

We really need to be able to reproduce the error.
As far as I can tell the code in the fiddle works.

6

ok, I will try to load everything im loading on the site in the fiddle. brb=)

7

How do i ensure that everything is loaded in the correct order? like if i load these js files:

flexlider.js
fastclick.js
select2.js
app.js (i initialize them in here)

do I have to initialze them in that order in the app.js ?

8

Are you referring to WordPress?

9

I hate to say this, but the more things that you load, the chance increases that something is colliding globally. Do you really need all that? Just sayin’.

:slight_smile:

10

I tried removing everything in my app.js file except the select2-initialize … still the same problem. Can it have something to do with in what order I load my other jquery plugins? Flexslider, fastclick etc.

11

Hmm loading it via CDN works.

12

Is the CDN the latest version? It might have been a compatibility issue. IDK. I try to use as much vanilla JS as I can, and resort to libraries only when absolutely necessary.

:slight_smile:

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.