CODEWITHSUNDEEP
javascriptjqueryjquery-select2
Funlamb
Funlamb

Reputation: 625

Uncaught ReferenceError: jQuery is not defined error when using select2

I have read this: Uncaught ReferenceError: jQuery is not defined

Which led me to this: Uncaught ReferenceError: $ is not defined?

After understanding the problem that I was not referencing jQuery before I was using it I changed my code.

From this:

<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

I moved jQuery to the top like this:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>

That fixed my first Uncaught ReferenceError. I am however still getting the same error but from select2.

Uncaught ReferenceError: jQuery is not defined
    <anonymous> https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js:2
    <anonymous> https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js:2
select2.min.js:2:83

I do not know how to reference it any sooner and ever their own page shows how to setup the code.

Upvotes: 2

Views: 6937

Answers (2)

Adivhaho Mavhungu
Adivhaho Mavhungu

Reputation: 553

I encountered the same issue, make sure you load Jquery before any scripts. You can place it on HTML head tag

Upvotes: 0

Funlamb
Funlamb

Reputation: 625

It turns out I tried to use select2 in my base.html file. I never referenced jQuary there.

base.html before:

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

And after:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

Small mistake that will hopefully save you 30 minutes of work. Check everything.

Upvotes: 3

Related Questions