title: Uncaught ReferenceError: $ is not defined laravel
body: <p>Hello i am new to laravel and i'm following this <a href="https://www.youtube.com/watch?v=E2OiJcmgGp4&amp;list=PLEHx9BVUzI6aCjeA57QNzlGWqI0HV_dbL&amp;index=7" rel="nofollow noreferrer">tutorial</a> in order to build a student CMS, i have a datepicker and a bootstrap modal that are supposed to popup when i click form buttons, but nothing shows up even though everything seems okay.
  I have a master page that contains all the styles and js references
  master.blade.php</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template"&gt;
      &lt;meta name="author" content="GeeksLabs"&gt;
      &lt;meta name="keyword" content="Creative, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal"&gt;
      &lt;link rel="shortcut icon" href="img/favicon.png"&gt;
  
      &lt;title&gt;Dashboard&lt;/title&gt;
  
      &lt;!-- Bootstrap CSS --&gt;    
      &lt;link href="/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;!-- bootstrap theme --&gt;
      &lt;link href="/css/bootstrap-theme.css" rel="stylesheet"&gt;
      &lt;!--external css--&gt;
      &lt;!-- font icon --&gt;
      &lt;link href="/css/elegant-icons-style.css" rel="stylesheet" /&gt;
      &lt;link href="/css/font-awesome.min.css" rel="stylesheet" /&gt;    
      &lt;!-- full calendar css--&gt;
      &lt;link href="/assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" /&gt;
      &lt;link href="/assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" /&gt;
      &lt;!-- easy pie chart--&gt;
      &lt;link href="/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/&gt;
      &lt;!-- owl carousel --&gt;
      &lt;link rel="stylesheet" href="/css/owl.carousel.css" type="text/css"&gt;
      &lt;link href="/css/jquery-jvectormap-1.2.2.css" rel="stylesheet"&gt;
      &lt;!-- Custom styles --&gt;
      &lt;link rel="stylesheet" href="/css/fullcalendar.css"&gt;
      &lt;link href="/css/widgets.css" rel="stylesheet"&gt;
      &lt;link href="/css/style.css" rel="stylesheet"&gt;
      &lt;link href="/css/style-responsive.css" rel="stylesheet" /&gt;
      &lt;link href="/css/xcharts.min.css" rel=" stylesheet"&gt;    
      &lt;link href="/css/jquery-ui-1.10.4.min.css" rel="stylesheet"&gt;
      &lt;!-- =======================================================
          Theme Name: NiceAdmin
          Theme URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
          Author: BootstrapMade
          Author URL: https://bootstrapmade.com
      ======================================================= --&gt;
    &lt;/head&gt;
  &lt;body&gt;
  
  &lt;section id="container" class=""&gt;
      @include('layouts.header.header')
      @include('layouts.sidebars.sidebar')
      &lt;section id="main-content"&gt;
          &lt;div class="wrapper"&gt;
        @yield('content')
      &lt;/div&gt;
      &lt;/section&gt;
  &lt;/section&gt;
  @yield('script')
      &lt;script src="/js/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="/js/jquery-ui-1.10.4.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/jquery-ui-1.9.2.custom.min.js"&gt;&lt;/script&gt;
      &lt;!-- bootstrap --&gt;
      &lt;script src="/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;!-- nice scroll --&gt;
      &lt;script src="/js/jquery.scrollTo.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/jquery.nicescroll.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- charts scripts --&gt;
      &lt;script src="/assets/jquery-knob/js/jquery.knob.js"&gt;&lt;/script&gt;
      &lt;script src="/js/jquery.sparkline.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"&gt;&lt;/script&gt;
      &lt;script src="/js/owl.carousel.js" &gt;&lt;/script&gt;
      &lt;!-- jQuery full calendar --&gt;
      &lt;&lt;script src="/js/fullcalendar.min.js"&gt;&lt;/script&gt; &lt;!-- Full Google Calendar - Calendar --&gt;
      &lt;script src="/assets/fullcalendar/fullcalendar/fullcalendar.js"&gt;&lt;/script&gt;
      &lt;!--script for this page only--&gt;
      &lt;script src="/js/calendar-custom.js"&gt;&lt;/script&gt;
      &lt;script src="/js/jquery.rateit.min.js"&gt;&lt;/script&gt;
      &lt;!-- custom select --&gt;
      &lt;script src="/js/jquery.customSelect.min.js" &gt;&lt;/script&gt;
      &lt;script src="/assets/chart-master/Chart.js"&gt;&lt;/script&gt;
  
      &lt;!--custome script for all page--&gt;
      &lt;script src="/js/scripts.js"&gt;&lt;/script&gt;
      &lt;!-- custom script for this page--&gt;
      &lt;script src="/js/sparkline-chart.js"&gt;&lt;/script&gt;
      &lt;script src="/js/easy-pie-chart.js"&gt;&lt;/script&gt;
      &lt;script src="/js/jquery-jvectormap-1.2.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/jquery-jvectormap-world-mill-en.js"&gt;&lt;/script&gt;
      &lt;script src="/js/xcharts.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/jquery.autosize.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/jquery.placeholder.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/gdp-data.js"&gt;&lt;/script&gt; 
      &lt;script src="/js/morris.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/sparklines.js"&gt;&lt;/script&gt;   
      &lt;script src="/js/charts.js"&gt;&lt;/script&gt;
      &lt;script src="/js/jquery.slimscroll.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have another page that contains the form to add a course and the scripts for the datepicker and the modal
  manageCourse.blade.php</p>
  
  <pre><code>@extends('layouts.master')
  @section('content')
  @include('courses.popup.academic')
  
  &lt;div class="row"&gt;
      &lt;div class="col-lg-12"&gt;
          &lt;h3 class="page-header"&gt;&lt;i class="fa fa-file-text-o"&gt;&lt;/i&gt;Courses&lt;/h3&gt;
          &lt;ol class="breadcrumb"&gt;
              &lt;li&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;i class="icon_document_alt"&gt;&lt;/i&gt;Course&lt;/li&gt;
              &lt;li&gt;&lt;i class="fa fa-file-text-o"&gt;&lt;/i&gt;Manage Course&lt;/li&gt;
          &lt;/ol&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-lg-12"&gt;
          &lt;section class="panel panel-default"&gt;
              &lt;header class="panel-heading"&gt;
                  Manage Course
              &lt;/header&gt;
              &lt;form class="form-horizontal"&gt;
                  &lt;div class="panel-body" style="border-bottom: 1px solid #ccc;"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div class="col-sm-3"&gt;
                              &lt;label for="academic-year"&gt;Academic Year&lt;/label&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;select class="form-control" name="academic_id" id="academic_id"&gt;
  
                                  &lt;/select&gt;
                                  &lt;div class="input-group-addon" &gt;
                                      &lt;span class="fa fa-plus" id="add-more-academic"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="col-sm-4"&gt;
                              &lt;label for="program"&gt;Course&lt;/label&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;select class="form-control" name="program_id" id="program_id"&gt;
  
                                  &lt;/select&gt;
                                  &lt;div class="input-group-addon"&gt;
                                      &lt;span class="fa fa-plus"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="col-sm-5"&gt;
                              &lt;label for="level"&gt;Course&lt;/label&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;select class="form-control" name="level_id" id="level_id"&gt;
  
                                  &lt;/select&gt;
                                  &lt;div class="input-group-addon"&gt;
                                      &lt;span class="fa fa-plus"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="col-sm-3"&gt;
                              &lt;label for="shift"&gt;Shift&lt;/label&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;select class="form-control" name="shift_id" id="shift_id"&gt;
  
                                  &lt;/select&gt;
                                  &lt;div class="input-group-addon"&gt;
                                      &lt;span class="fa fa-plus"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="col-sm-4"&gt;
                              &lt;label for="time"&gt;Time&lt;/label&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;select class="form-control" name="time_id" id="time_id"&gt;
  
                                  &lt;/select&gt;
                                  &lt;div class="input-group-addon"&gt;
                                      &lt;span class="fa fa-plus"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="col-sm-3"&gt;
                              &lt;label for="batch"&gt;Batch&lt;/label&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;select class="form-control" name="batch_id" id="batch_id"&gt;
  
                                  &lt;/select&gt;
                                  &lt;div class="input-group-addon"&gt;
                                      &lt;span class="fa fa-plus"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="col-sm-2"&gt;
                              &lt;label for="group"&gt;Group&lt;/label&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;select class="form-control" name="group_id" id="group_id"&gt;
  
                                  &lt;/select&gt;
                                  &lt;div class="input-group-addon"&gt;
                                      &lt;span class="fa fa-plus"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="col-sm-3"&gt;
                              &lt;label for="startDate"&gt;Start date&lt;/label&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;select class="form-control" name="start_date" id="start_date"&gt;
  
                                  &lt;/select&gt;
                                  &lt;div class="input-group-addon"&gt;
                                      &lt;span class="fa fa-calendar"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="col-sm-4"&gt;
                              &lt;label for="endDate"&gt;End date&lt;/label&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;select class="form-control" name="end_date" id="end_date"&gt;
  
                                  &lt;/select&gt;
                                  &lt;div class="input-group-addon"&gt;
                                      &lt;span class="fa fa-calendar"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  &lt;/div&gt;
                      &lt;div class="panel-footer"&gt;
                          &lt;button type="submit" class="btn btn-default btn-sm"&gt;Create Course&lt;/button&gt;
                      &lt;/div&gt;
  
              &lt;/form&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  @endsection
  
  @section('script')
  &lt;script type="text/javascript"&gt;
      $('#start_date').datepicker({
          changeMonth:true,
          changeYear:true,
      });
      $('#add-more-academic').on('click', function(){
          $('#academic-year-show').modal();
      });
  &lt;/script&gt;
  @endsection
  </code></pre>
  
  <p>and the page for the modal</p>
  
  <pre><code>&lt;div class="modal fade" id="academic-year-show" tabindex="-1" role="dialog" aria-labelled-by="myModalLabel" aria-hidden="true"&gt;
  &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Academic year&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-12"&gt;
                      &lt;input type="text" name="academic_year" id="new-academic" class="form-control" placeholder="Academic year"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button data-dismiss="modal" class="btn btn-default" type="button"&gt;Close&lt;/button&gt;
              &lt;button class="btn btn-success btn-save-academic" type="button"&gt;Save&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Nothing seems to work, everytime i get this error: Uncaught ReferenceError: $ is not defined. Can anyone tell me why the datepicker and the modal are  not showing?</p>