ReferenceError: $ is not defined

Question

I have this error message ReferenceError: $ is not defined
This is my header.

<link href="css/global-style.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" media="screen" href="css/datepicker3.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>

Following is my JavaScript code

<script type="text/javascript">
$('#sandbox-container .input-daterange').datepicker({
    startDate: "today",
    calendarWeeks: true,
    todayHighlight: true
});
</script>

Following is the HTML

<div class="col-md-12" id="sandbox-container">
    <label>Project Duration</label>
    <div class="input-daterange input-group" id="datepicker">
            <input type="text" class="input-md form-control" name="start" />
            <span class="input-group-addon">to</span>
            <input type="text" class="input-md form-control" name="end" />
    </div>
</div>

I want to show datepicker on the input tag.
I am using Bootstrap V3.1.
i am using this datepicker

Possible duplicate of [Uncaught ReferenceError: $ is not defined?](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) — Moradnejad, Jun 18 '19 at 10:58

mrsrinivas · Accepted Answer · 2017-07-20T14:09:41.897

134

Add jQuery library before your script which uses $ or jQuery so that $ can be identified in scripts.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

edited Jul 20 '17 at 14:09

answered Mar 08 '14 at 11:47

mrsrinivas

27,898
11
107
118

score 14 · Answer 2 · answered Mar 08 '14 at 11:51

14

Use Google CDN for fast loading:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

answered Mar 08 '14 at 11:51

Dinesh Saini

2,813
2
24
46

Also you need to add ui to support calender. – Dinesh Saini Mar 08 '14 at 11:52
Could you please show your header so that I can know about version of bootstrap and jquery exactly. – Dinesh Saini Mar 08 '14 at 11:59
I am using jQuery v2.0.3. I added my header in question – Shahab Mar 08 '14 at 12:08
code.jquery uses maxcdn, which is as quickly as google's cdn (at least in normal use-cases) and code.jquery is also the recommended way. – Matt3o12 Oct 17 '14 at 01:43

score 8 · Answer 3 · edited Aug 11 '17 at 11:03

8

Add this script inside head tag:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

edited Aug 11 '17 at 11:03

LinusGeffarth

21,607
24
100
152

answered Dec 18 '14 at 11:20

Randhir Yadav

1,439
14
24

score 4 · Answer 4 · answered Dec 18 '18 at 16:50

It's one of the common mistake everybody make while working with jQuery, Basically $ is an alias of jQuery() so when you try to call/access it before declaring the function will endup throwing this error.

Reasons might be

1) Path to jQuery library you included is not correct.

2) Added library after the script were you see that error

To solve this

Load the jquery library beginning of all your javascript files/scripts.

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

score 1 · Answer 5 · answered Oct 06 '18 at 04:13

jQuery is a JavaScript library, The purpose of jQuery is to make code much easier to use JavaScript.

The jQuery syntax is tailor-made for selecting, A $ sign to define/access jQuery.

Its in declaration sequence must be on top then any other script included which uses jQuery

Correct position to jQuery declaration :

$(document).ready(function(){
    console.log('hi from jQuery!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

Above example will work perfectly because jQuery library is initialized before any other library which is using jQuery functions, including $

But if you apply it somewhere else, jQuery functions will not initialize in browser DOM and it will not able to identify any code related to jQuery, and its code starts with $ sign, so you will receive $ is not a function error.

Incorrect position for jQuery declaration:

$(document).ready(function(){
    console.log('hi from jQuery!');
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Above code will not work because, jQuery is not declared on the top of any library which uses jQuery ready function.

score 1 · Answer 6 · answered Nov 08 '19 at 05:43

Though my response is late, but it can still help.

lf you are using Spring Tool Suite and you still think that the JQuery file reference path is correct, then refresh your project whenever you modify the JQuery file.

You refresh by right-clicking on the project name -> refresh.

That's what solved mine.

ReferenceError: $ is not defined

6 Answers6

Linked

Related