ReferenceError: $ is not defined

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

Answers:

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>

Use Google CDN for fast loading:

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

Add this script inside head tag:

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

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>

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.

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.

Change your code to:

<html>

<head>
<LINK rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
</head>

<body>
<p>Location: <input type="text" id="searchTextField" size="50"  placeholder="Where do you want to go ?"/></p>

<div id="results"></div>

<script>


var input = document.getElementById('searchTextField');
var options = {

};
var autocomplete = new google.maps.places.Autocomplete(input,options);
//autocomplete.bindTo('bounds', map); 

google.maps.event.addListener(autocomplete, 'place_changed', function() {
     $("#results").html('');
  var place = autocomplete.getPlace();
    $("#results").append('<p> Latitude and Longtidute : '+place.geometry.location +'</p>');
    $("#results").append('<p> Address : '+place.formatted_address +'</p>');
    $("#results").append('<p> Places Name : '+place.name+'</p>');

    var searchAddressComponents = place.address_components;
    $.each(searchAddressComponents, function(){
    if(this.types[0]=="postal_code"){
        searchCountry=this.short_name;
    } 
});
});
</script>
</body>
</html>

$ is defined by jQuery, which is an ordinary, 3rd-party library.

If you don't include it, it won't exist.

Try using jQuery instead $

jQuery('document').ready(function () {
jQuery("#datepicker1,#datepicker2").datepicker({
    minDate: 0,
    beforeShowDay: $.datepicker.noWeekends,
    dateFormat: "dd-mm-yy"
});});

Finally I figure it out after two days. My jsp page was load within the home page so home page also calling those from jquery inside the project. I removed my jsp's cdn and let home page to call those inside jquery. Thank you so much for your help all. Ps: I feel so stupid. :D

ReferenceError: $ is not defined

Answers:

Tags

Recent Questions

Top Questions