uncaught TypeError: Cannot read property 'select2' of null

2,251 views
Skip to first unread message

spacec...@gmail.com

unread,
Feb 15, 2016, 8:04:05 AM2/15/16
to select2
Hi,
I would like to use select2 on a Joomla module but the example below give me the error on the subject.

Both .css and .js are accessible over Internet.

Any idea?
Thanks
Stefano Leone

<!DOCTYPE html>
<html>
<HEAD>
<link href="https://cdn.jsdelivr.net/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/select2/4.0.1/js/select2.min.js"></script>

</HEAD>

<body>

<script type="text/javascript">
$(".js-example-basic-multiple").select2();
</script>

<select class="js-example-basic-multiple" multiple="multiple">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>

</select>

</body>
</html>

Kevin Brown

unread,
Feb 15, 2016, 8:32:37 AM2/15/16
to select2

Select2 requires jQuery to be included in the page, it looks like you aren't including the JS file before Select2 on the page.


--
You received this message because you are subscribed to the Google Groups "select2" group.
To unsubscribe from this group and stop receiving emails from it, send an email to select2+u...@googlegroups.com.
To post to this group, send email to sel...@googlegroups.com.
Visit this group at https://groups.google.com/group/select2.
For more options, visit https://groups.google.com/d/optout.

spacec...@gmail.com

unread,
Feb 15, 2016, 8:43:41 AM2/15/16
to select2, ke...@kevin-brown.com
Hi Kevin,
Thanks for the quick reply!

I just added this line into the head section, just before the one for .js:

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

I now get this error:

Uncaught TypeError: jQuery(...).click(...).oauthpopup is not a function

Any idea?

Kevin Brown

unread,
Feb 15, 2016, 9:55:49 AM2/15/16
to spacec...@gmail.com, select2
That error doesn't appear to be related to Select2, but it does suggest that you actually had jQuery loaded on the page before. You might need to remove the copy of jQuery that you added and move Select2 down further in the page (below the existing copy of jQuery).

Stefano Leone

unread,
Feb 17, 2016, 3:51:37 AM2/17/16
to Kevin Brown, select2
Hi Kevin,
I fixed using this head:

<head>
  <meta charset="utf-8">
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

rajnish...@gmail.com

unread,
Jun 3, 2016, 5:56:55 AM6/3/16
to select2, spacec...@gmail.com, ke...@kevin-brown.com
I wasted the whole day.. tried even other .js files...
and your suggestion worked like charm :)
thanks kevin :)
Reply all
Reply to author
Forward
0 new messages