未捕獲ReferenceError：$未定義laravel

你好，我是laravel的新手，我正在關注這個tutorial爲了建立一個學生CMS，我有一個datepicker和一個引導模式，當我點擊表單按鈕，但即使一切看起來沒問題，也沒有任何東西出現。我有一個包含所有樣式和js引用 master.blade.php母版頁

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template"> 
    <meta name="author" content="GeeksLabs"> 
    <meta name="keyword" content="Creative, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal"> 
    <link rel="shortcut icon" href="img/favicon.png"> 

    <title>Dashboard</title> 

    <!-- Bootstrap CSS -->  
    <link href="/css/bootstrap.min.css" rel="stylesheet"> 
    <!-- bootstrap theme --> 
    <link href="/css/bootstrap-theme.css" rel="stylesheet"> 
    <!--external css--> 
    <!-- font icon --> 
    <link href="/css/elegant-icons-style.css" rel="stylesheet" /> 
    <link href="/css/font-awesome.min.css" rel="stylesheet" />  
    <!-- full calendar css--> 
    <link href="/assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" /> 
    <link href="/assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" /> 
    <!-- easy pie chart--> 
    <link href="/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/> 
    <!-- owl carousel --> 
    <link rel="stylesheet" href="/css/owl.carousel.css" type="text/css"> 
    <link href="/css/jquery-jvectormap-1.2.2.css" rel="stylesheet"> 
    <!-- Custom styles --> 
    <link rel="stylesheet" href="/css/fullcalendar.css"> 
    <link href="/css/widgets.css" rel="stylesheet"> 
    <link href="/css/style.css" rel="stylesheet"> 
    <link href="/css/style-responsive.css" rel="stylesheet" /> 
    <link href="/css/xcharts.min.css" rel=" stylesheet">  
    <link href="/css/jquery-ui-1.10.4.min.css" rel="stylesheet"> 
    <!-- ======================================================= 
     Theme Name: NiceAdmin 
     Theme URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ 
     Author: BootstrapMade 
     Author URL: https://bootstrapmade.com 
    ======================================================= --> 
    </head> 
<body> 

<section id="container" class=""> 
    @include('layouts.header.header') 
    @include('layouts.sidebars.sidebar') 
    <section id="main-content"> 
     <div class="wrapper"> 
     @yield('content') 
    </div> 
    </section> 
</section> 
@yield('script') 
    <script src="/js/jquery.js"></script> 
    <script src="/js/jquery-ui-1.10.4.min.js"></script> 
    <script src="/js/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript" src="/js/jquery-ui-1.9.2.custom.min.js"></script> 
    <!-- bootstrap --> 
    <script src="/js/bootstrap.min.js"></script> 
    <!-- nice scroll --> 
    <script src="/js/jquery.scrollTo.min.js"></script> 
    <script src="/js/jquery.nicescroll.js" type="text/javascript"></script> 
    <!-- charts scripts --> 
    <script src="/assets/jquery-knob/js/jquery.knob.js"></script> 
    <script src="/js/jquery.sparkline.js" type="text/javascript"></script> 
    <script src="/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script> 
    <script src="/js/owl.carousel.js" ></script> 
    <!-- jQuery full calendar --> 
    <<script src="/js/fullcalendar.min.js"></script> <!-- Full Google Calendar - Calendar --> 
    <script src="/assets/fullcalendar/fullcalendar/fullcalendar.js"></script> 
    <!--script for this page only--> 
    <script src="/js/calendar-custom.js"></script> 
    <script src="/js/jquery.rateit.min.js"></script> 
    <!-- custom select --> 
    <script src="/js/jquery.customSelect.min.js" ></script> 
    <script src="/assets/chart-master/Chart.js"></script> 

    <!--custome script for all page--> 
    <script src="/js/scripts.js"></script> 
    <!-- custom script for this page--> 
    <script src="/js/sparkline-chart.js"></script> 
    <script src="/js/easy-pie-chart.js"></script> 
    <script src="/js/jquery-jvectormap-1.2.2.min.js"></script> 
    <script src="/js/jquery-jvectormap-world-mill-en.js"></script> 
    <script src="/js/xcharts.min.js"></script> 
    <script src="/js/jquery.autosize.min.js"></script> 
    <script src="/js/jquery.placeholder.min.js"></script> 
    <script src="/js/gdp-data.js"></script> 
    <script src="/js/morris.min.js"></script> 
    <script src="/js/sparklines.js"></script> 
    <script src="/js/charts.js"></script> 
    <script src="/js/jquery.slimscroll.min.js"></script> 
</body> 
</html>

我有一個包含窗體中加入一個課程，併爲日期選擇器的腳本和模態 manageCourse另一頁.blade.php

@extends('layouts.master') 
@section('content') 
@include('courses.popup.academic') 

<div class="row"> 
    <div class="col-lg-12"> 
     <h3 class="page-header"><i class="fa fa-file-text-o"></i>Courses</h3> 
     <ol class="breadcrumb"> 
      <li><i class="fa fa-home"></i><a href="index.html">Home</a></li> 
      <li><i class="icon_document_alt"></i>Course</li> 
      <li><i class="fa fa-file-text-o"></i>Manage Course</li> 
     </ol> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-lg-12"> 
     <section class="panel panel-default"> 
      <header class="panel-heading"> 
       Manage Course 
      </header> 
      <form class="form-horizontal"> 
       <div class="panel-body" style="border-bottom: 1px solid #ccc;"> 
        <div class="form-group"> 
         <div class="col-sm-3"> 
          <label for="academic-year">Academic Year</label> 
          <div class="input-group"> 
           <select class="form-control" name="academic_id" id="academic_id"> 

           </select> 
           <div class="input-group-addon" > 
            <span class="fa fa-plus" id="add-more-academic"></span> 
           </div> 
          </div> 
         </div> 

         <div class="col-sm-4"> 
          <label for="program">Course</label> 
          <div class="input-group"> 
           <select class="form-control" name="program_id" id="program_id"> 

           </select> 
           <div class="input-group-addon"> 
            <span class="fa fa-plus"></span> 
           </div> 
          </div> 
         </div> 

         <div class="col-sm-5"> 
          <label for="level">Course</label> 
          <div class="input-group"> 
           <select class="form-control" name="level_id" id="level_id"> 

           </select> 
           <div class="input-group-addon"> 
            <span class="fa fa-plus"></span> 
           </div> 
          </div> 
         </div> 

         <div class="col-sm-3"> 
          <label for="shift">Shift</label> 
          <div class="input-group"> 
           <select class="form-control" name="shift_id" id="shift_id"> 

           </select> 
           <div class="input-group-addon"> 
            <span class="fa fa-plus"></span> 
           </div> 
          </div> 
         </div> 

         <div class="col-sm-4"> 
          <label for="time">Time</label> 
          <div class="input-group"> 
           <select class="form-control" name="time_id" id="time_id"> 

           </select> 
           <div class="input-group-addon"> 
            <span class="fa fa-plus"></span> 
           </div> 
          </div> 
         </div> 

         <div class="col-sm-3"> 
          <label for="batch">Batch</label> 
          <div class="input-group"> 
           <select class="form-control" name="batch_id" id="batch_id"> 

           </select> 
           <div class="input-group-addon"> 
            <span class="fa fa-plus"></span> 
           </div> 
          </div> 
         </div> 

         <div class="col-sm-2"> 
          <label for="group">Group</label> 
          <div class="input-group"> 
           <select class="form-control" name="group_id" id="group_id"> 

           </select> 
           <div class="input-group-addon"> 
            <span class="fa fa-plus"></span> 
           </div> 
          </div> 
         </div> 

         <div class="col-sm-3"> 
          <label for="startDate">Start date</label> 
          <div class="input-group"> 
           <select class="form-control" name="start_date" id="start_date"> 

           </select> 
           <div class="input-group-addon"> 
            <span class="fa fa-calendar"></span> 
           </div> 
          </div> 
         </div> 

         <div class="col-sm-4"> 
          <label for="endDate">End date</label> 
          <div class="input-group"> 
           <select class="form-control" name="end_date" id="end_date"> 

           </select> 
           <div class="input-group-addon"> 
            <span class="fa fa-calendar"></span> 
           </div> 
          </div> 
         </div> 

        </div> 
</div> 
        <div class="panel-footer"> 
         <button type="submit" class="btn btn-default btn-sm">Create Course</button> 
        </div> 

      </form> 
     </section> 
    </div> 
</div> 
@endsection 

@section('script') 
<script type="text/javascript"> 
    $('#start_date').datepicker({ 
     changeMonth:true, 
     changeYear:true, 
    }); 
    $('#add-more-academic').on('click', function(){ 
     $('#academic-year-show').modal(); 
    }); 
</script> 
@endsection

和

<div class="modal fade" id="academic-year-show" tabindex="-1" role="dialog" aria-labelled-by="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title">Academic year</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="row"> 
       <div class="col-sm-12"> 
        <input type="text" name="academic_year" id="new-academic" class="form-control" placeholder="Academic year"> 
       </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button data-dismiss="modal" class="btn btn-default" type="button">Close</button> 
      <button class="btn btn-success btn-save-academic" type="button">Save</button> 
     </div> 
    </div> 
</div>

似乎沒有任何的模態的頁面工作，每次我得到這個錯誤：未捕獲ReferenceError：$未定義。誰能告訴我爲什麼datepicker和模式沒有顯示？

來源

2017-08-15 Pain

它看起來像是將所有的腳本標籤包裝在一個額外的腳本標籤中？請參閱@yield（'script'）'。嘗試刪除該標籤和尾部的''標籤，並再次在瀏覽器中重新運行代碼。 – War10ck

仍然無法運行，@yield（'腳本'）用於manageCourse.blade.php頁面中的@section（'腳本'）頁面 – Pain

將腳本代碼放入腳本文件中，並使用腳本src – num8er

您的部分@yield("script")需要去後<script src="/js/jquery.js"></script>在master.blade.php。目前，您正嘗試運行取決於可用的jQuery的代碼，方法是擴展master佈局併爲擴展模板生成一個部分，但是當此收益發生在jQuery之前時可用。

<script src="/js/jquery.js"></script> 
    @yield('script') 
    <script src="/js/jquery-ui-1.10.4.min.js"></script> 
    ... 
</body>

或

... 
    <script src="/js/charts.js"></script> 
    <script src="/js/jquery.slimscroll.min.js"></script> 
    @yield('script') 
</body>

一般來說，每當我@yield爲js做，我這樣做是在master佈局中的所有其他<script>標籤後，但只要你知道你的依賴，他們之前已經加載被叫了，一切都很好。

來源

2017-08-15 16:35:48

謝謝你的幫助，它正在爲模式但日期選擇器仍未顯示 – Pain

未捕獲ReferenceError：$未定義laravel

回答

相關問題