Javascript 未捕获引用错误:$未定义为LAVEL

Javascript 未捕获引用错误:$未定义为LAVEL,javascript,jquery,laravel-5,Javascript,Jquery,Laravel 5,您好,我是拉威尔的新手,为了建立一个学生CMS,我遵循这一点,我有一个日期选择器和一个引导模式,当我点击表单按钮时应该会弹出,但没有显示任何内容,即使一切看起来都正常。 我有一个包含所有样式和js引用的母版页 master.blade.php <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=dev

您好,我是拉威尔的新手,为了建立一个学生CMS,我遵循这一点,我有一个日期选择器和一个引导模式,当我点击表单按钮时应该会弹出,但没有显示任何内容,即使一切看起来都正常。 我有一个包含所有样式和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>
@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

仪表板
@包括('layouts.header.header')
@包括('layouts.sidebar.sidebar')
@产量(‘含量’)
@屈服('脚本')
您的部分
@yield(“script”)
需要在
master.blade.php
中的
之后转到。目前,您正试图通过扩展
master
布局并向扩展模板生成一个部分来运行依赖于jQuery可用性的代码,但这种生成是在
jQuery
可用之前进行的

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

@屈服('脚本')
...

。。。
@屈服('脚本')
通常,每当我为
js
@yield
时,我都会在
主布局中的所有其他
标记之后做,但只要您知道您的依赖项在调用之前已经加载,一切都很好。

您的部分
@yield(“脚本”)
需要在
master.blade.php
中的
之后转到。目前,您正试图通过扩展
master
布局并向扩展模板生成一个部分来运行依赖于jQuery可用性的代码,但这种生成是在
jQuery
可用之前进行的

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

@屈服('脚本')
...

。。。
@屈服('脚本')

通常,每当我为
js
@yield
时,我都是在
主布局中的所有其他
标记之后做的,但只要您知道在调用依赖项之前已加载它们,一切都很好。

看起来您正在将所有脚本标记包装在一个附加的脚本标记中?请参阅
@yield('script')
。请尝试删除此标记和后面的
标记,然后再次在浏览器中重新运行代码。仍然不工作,@yield('script')用于manageCourse.blade.php页面中的@section('script'),将该代码放入脚本文件中,只需使用脚本srchwhich code@num8er?@Pain在
标记之间切换
$(
jquery的
$
看起来您正在将所有脚本标记包装在一个附加的脚本标记中?请参阅
@yield('script')
。尝试删除此标记和后续的
标记,然后再次在浏览器中运行代码。仍然不工作,@yield('script')用于@section('script)在manageCourse.blade.php页面中,将该代码放入脚本文件中,只需使用脚本srchwhich code@num8er?@Pain在
标记之间
$(
jquery的
$
感谢您的帮助,它对模式有效,但日期选择器仍不显示感谢您的帮助,它对模式有效,但日期选择器仍不显示
  ...
  <script src="/js/charts.js"></script>
  <script src="/js/jquery.slimscroll.min.js"></script>
  @yield('script')
</body>