title: Uncaught ReferenceError: $ is not defined. (jQuery, javascript)
body: <p>I know that "Uncaught ReferenceError: $ is not defined" is a common problem. But I have no idea where my code is wrong. I googled but no solution could solve this. Thanks in advance!</p>
  
  <p><img src="https://i.stack.imgur.com/DvK3P.jpg" alt="Screenshot of the bug"></p>
  
  <p>My code is below.</p>
  
  <p>Because my code is way too lengthy, so I divided it into 3 jsp files: list.jsp, authorModals.jsp, listAuthor.jsp. I attach my code here, but I have deleted some unrelated code to make it short.</p>
  
  <p>list.jsp:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
  &lt;title&gt;Administrator&lt;/title&gt;
  
  &lt;!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ --&gt;
  &lt;link href="../css/bootstrap.min.css" rel="stylesheet"&gt;
  
  &lt;!-- Custom CSS --&gt;
  &lt;link href="../css/freelancer.css" rel="stylesheet"&gt;
  
  &lt;!-- Custom Fonts --&gt;
  &lt;link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet"
      type="../text/css"&gt;
  &lt;link href="http://fonts.googleapis.com/css?family=Montserrat:400,700"
      rel="stylesheet" type="../text/css"&gt;
  &lt;link
      href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic"
      rel="stylesheet" type="../text/css"&gt;
  
  &lt;/head&gt;
  
  &lt;body id="page-top" class="index"&gt;
  
      &lt;!-- Author Modals --&gt;
      &lt;%@include file="authorModals.jsp"%&gt;               &lt;--! Links to authorModals.jsp--&gt;
  
      &lt;!-- jQuery --&gt;
      &lt;script src="../js/jquery.js"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap Core JavaScript --&gt;
      &lt;script src="../js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Plugin JavaScript --&gt;
      &lt;script
          src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"&gt;&lt;/script&gt;
      &lt;script src="../js/classie.js"&gt;&lt;/script&gt;
      &lt;script src="../js/cbpAnimatedHeader.js"&gt;&lt;/script&gt;
  
      &lt;!-- Contact Form JavaScript --&gt;
      &lt;script src="../js/jqBootstrapValidation.js"&gt;&lt;/script&gt;
      &lt;script src="../js/contact_me.js"&gt;&lt;/script&gt;
  
      &lt;!-- Custom Theme JavaScript --&gt;
      &lt;script src="../js/freelancer.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>authorModals.jsp:</p>
  
  <pre><code>&lt;!-- Author Modals --&gt;
  
  &lt;!-- unrelated code here --&gt;
  
  &lt;!-- List Author --&gt;
  &lt;%@include file="listAuthor.jsp"%&gt;                 &lt;--! Links to listAuthor.jsp--&gt;
  </code></pre>
  
  <p>listAuthor.jsp:</p>
  
  <pre><code>&lt;table class="table table-striped"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;ID&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Update&lt;/th&gt;
              &lt;th&gt;Delete&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="authorData"&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  
  &lt;script id="entry-template" type="text/x-handlebars-template"&gt;
        &lt;tr&gt;
          &lt;td&gt;{{authorId}}&lt;/td&gt;
          &lt;td&gt;{{authorName}}&lt;/td&gt;
          &lt;td&gt;{{authorId}}&lt;/td&gt;
          &lt;td&gt;{{authorName}}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/script&gt;
  
  &lt;script&gt;
          var source = $("#entry-template").html();      &lt;!-- My code stops here --&gt;
          var template = Handlebars.compile(source);
  
          var dataString;
          $.ajax({
              method : "POST",
              url : "../listAuthor"
          }).done(function(data) {
              data = $.parseJSON(data);
              $.each(data, function(i, item) {
                  var html = template(item);
                  dataString += html;
              });
              $("#authorData").html(dataString);
          });
  
          function pageAuthor(page) {
              dataString = "";
              $.ajax({
                  method : "POST",
                  url : "../listAuthor",
                  data : {
                      pageNo : page
                  }
              }).done(function(data) {
                  data = $.parseJSON(data);
                  $.each(data, function(i, item) {
                      var html = template(item);
                      dataString += html;
                  });
                  $("#authorData").html(dataString);
              });
  
          }
      &lt;/script&gt;
  </code></pre>