customScript.js:1 Uncaught ReferenceError: $ is not defined

Question

<head>
   <script type="text/javascript" src="customScript.js"></script>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="docs/assets/js/vendor/jquery.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="img/facebookicn.png">

    <title>Facbook</title>


    <link href="dist/css/jumbotron.css" rel="stylesheet">
    <link href="dist/css/custom.css" rel="stylesheet">


</head>

//this is in coustom.js file

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

//this is in html

    <div class="col-md-6 txtfeild ">
  <a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!"><input id="firstName" class="form-control" placeholder="First Name"  type="text" onblur="validateName()" ></a>
       </div>

i am getting error like this customScript.js:1 Uncaught ReferenceError: $ is not defined at customScript.js:1 tried many methods but cannot resolve this error

score 3 · Accepted Answer · answered Jul 23 '17 at 19:59

Your customScript fires before you are importing the jQuery script. Move the import line above the customScript import.

<script src="docs/assets/js/vendor/jquery.min.js"></script>
<script type="text/javascript" src="customScript.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">

score 1 · Answer 2 · answered Jul 23 '17 at 20:01

jQuery is loaded after you load customScript.js so the variable $ is undefined. You have to insert the script after you load jQuery.

<head>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="docs/assets/js/vendor/jquery.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="customScript.js"></script>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="img/facebookicn.png">

    <title>Facbook</title>


    <link href="dist/css/jumbotron.css" rel="stylesheet">
    <link href="dist/css/custom.css" rel="stylesheet">

</head>

score 0 · Answer 3 · answered Jul 23 '17 at 20:01

in order to use Jquery in your script you first need to load it

<script


src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

add this line before your customeScript to add jquery through cdn or set the path to the jquery files if you have downloaded it

customScript.js:1 Uncaught ReferenceError: $ is not defined

3 Answers3

Linked