未捕获的ReferenceError:$未定义laravel

时间:2017-08-15 16:06:09

标签: javascript jquery laravel-5

你好我是laravel的新手,为了建立一个学生CMS,我跟着这个tutorial,我有一个datepicker和一个bootstrap模式,当我点击表单按钮时应该弹出,但是即使一切似乎还好,也没有任何表现。 我有一个包含所有样式和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>

我有另一个页面,其中包含添加课程的表单以及datepicker和modal的脚本 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:$未定义。谁能告诉我为什么日期选择器和模态没有显示?

1 个答案:

答案 0 :(得分:4)

您的@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 <script>时,我会在master布局中的所有其他{{1}}标记之后执行此操作,但只要您知道您的依赖关系已有在他们被召唤之前已经被加载,一切都很好。