63

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.

1

7 Answers 7

153

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>
0
17

Use Google CDN for fast loading:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
4
  • Also you need to add ui to support calender. Commented Mar 8, 2014 at 11:52
  • Could you please show your header so that I can know about version of bootstrap and jquery exactly. Commented Mar 8, 2014 at 11:59
  • I am using jQuery v2.0.3. I added my header in question
    – Shahab
    Commented Mar 8, 2014 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
    Commented Oct 17, 2014 at 1:43
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>
5

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>
1

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.

1

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.

0

This may be due to jquery conflict of two different jquery versions Use noconflict method

Not the answer you're looking for? Browse other questions tagged or ask your own question.