laravel 完整日历不适用于主题 JQuery 和 Bootstrap

【问题标题】：laravel full calendar not working with theme JQuery and Bootstraplaravel 完整日历不适用于主题 JQuery 和 Bootstrap
【发布时间】：2019-12-05 14:21:01
【问题描述】：

我正在使用 laravel 完整的日历包 maddhatter/laravel-fullcalendar。这个包没有选择我的主题 jquery、bootstrap 和 moment。 我已将所有这些都包含在主刀片中并在此刀片中进行了扩展。 如果更改查询和引导程序，则日历可以工作，但所有其他在主题 jquery 和引导程序上工作的东西都停止工作。

将这些包含在主刀片中：

< link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet" > < script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script > < script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script >

它向我显示了控制台错误

Uncaught ReferenceError: jQuery is not defined

未捕获的引用错误：$ 未定义

刀片：

@extends('layouts.master')
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>



<div class="row">
    <div class="col-md-12 ">
        <div class="panel panel-default">
            <div class="panel-heading">Full Calendar Example</div>

            <div class="panel-body">
                {!! $calendar->calendar() !!}
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
{!! $calendar->script() !!}


@endsection

我的控制器：

public function weddingHallDashboardView()
{
    $events = [];
    $data = Booking::all();
    if($data->count()) {
        foreach ($data as $key => $value) {
            $events[] = Calendar::event(
                $value->booking_type,
                true,
                new \DateTime($value->date_from),
                new \DateTime($value->date_to),
                null,
                // Add color and link on event
                [
                    'color' => '#f05050',
                    'url' => 'pass here url and any route',
                ]
            );
        }
    }
    $calendar = Calendar::addEvents($events);


    return view('dashboards.wedding-hall-dashboard')
        ->with(['calendar' => $calendar]);
}

主刀

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="{{"app-assets/assets/images/favicon.png"}}">
    <title>@yield('site_title') &#124; 3orrsy</title>
    <!-- Bootstrap Core CSS -->
    <link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
    <!--alerts CSS -->
    <link href="{{"app-assets/assets/plugins/sweetalert/sweetalert.css"}}" rel="stylesheet" type="text/css">
    <!-- chartist CSS -->
    <link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.css"}}" rel="stylesheet">
    <link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist-init.css"}}" rel="stylesheet">
    <link href="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css"}}"
          rel="stylesheet">
    <!--This page css - Morris CSS -->
    <link href="{{"app-assets/assets/plugins/c3-master/c3.min.css"}}" rel="stylesheet">
    <!-- Bootstrap Core CSS -->
    <link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
    <link href="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css"}}" rel="stylesheet">


    <!-- Date picker plugins css -->
    <link href="{{asset('app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />

    <!-- Custom CSS -->
    <link href="{{"app-assets/css/style.css"}}" rel="stylesheet">
    <!-- You can change the theme colors from here -->
    <link href="{{"app-assets/css/colors/blue.css"}}" id="theme" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/SlimImageCropper/slim.css')}}">
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>

<body>

<div>
// Side Menu
</div>

<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="{{"app-assets/assets/plugins/bootstrap/js/popper.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap/js/bootstrap.min.js"}}"></script>

<!-- slimscrollbar scrollbar JavaScript -->
<script src="{{"app-assets/js/jquery.slimscroll.js"}}"></script>
<!--Wave Effects -->
<script src="{{"app-assets/js/waves.js"}}"></script>
<!--Menu sidebar -->
<script src="{{"app-assets/js/sidebarmenu.js"}}"></script>
<!--stickey kit -->
<script src="{{"app-assets/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sparkline/jquery.sparkline.min.js"}}"></script>

<!--Custom JavaScript -->
<script src="{{"app-assets/js/custom.min.js"}}"></script>
<script src="{{asset('app-assets/SlimImageCropper/slim.kickstart.min.js')}}"></script>

<!-- Plugin JavaScript -->

<script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"}}"></script>

<!-- Sweet-Alert  -->
<script src="{{"app-assets/assets/plugins/sweetalert/sweetalert.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sweetalert/jquery.sweet-alert.custom.js"}}"></script>

<script src="{{"app-assets/assets/plugins/datatables/jquery.dataTables.min.js"}}"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->

<!-- ============web================================================== -->
<!-- chartist chart -->
{{--<script src="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.js"}}"></script>--}}
{{--<script src="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js"}}"></script>--}}
<!--c3 JavaScript -->

<!-- Date Picker Plugin JavaScript -->
<script src="{{'app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js'}}"></script>

<script src="{{"app-assets/assets/plugins/d3/d3.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/c3-master/c3.min.js"}}"></script>
<!-- Chart JS -->
{{--<script src="{{"app-assets/js/dashboard1.js"}}"></script>--}}
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="{{"app-assets/assets/plugins/styleswitcher/jQuery.style.switcher.js"}}"></script>

</body>

</html>

【问题讨论】：

    标签： javascript jquery laravel laravel-5 bootstrap-4


    【解决方案1】：

    请执行ctrl+u 并检查jquery.min.js 的顺序是否在前。如果不在顶部添加此脚本。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    在您的主文件中。

    @stack('links') //after all link.
@stack('script') //after all script

    在您的刀片文件中。

    @push('script')
< script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script >
< script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script >
@endpush

@push('links')
< link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet" >
@endpush

    ma​​ster.blade

    <!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="{{"app-assets/assets/images/favicon.png"}}">
    <title>@yield('site_title') &#124; 3orrsy</title>
    <!-- Bootstrap Core CSS -->
    <link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
    <!--alerts CSS -->
    <link href="{{"app-assets/assets/plugins/sweetalert/sweetalert.css"}}" rel="stylesheet" type="text/css">
    <!-- chartist CSS -->
    <link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.css"}}" rel="stylesheet">
    <link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist-init.css"}}" rel="stylesheet">
    <link href="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css"}}"
          rel="stylesheet">
    <!--This page css - Morris CSS -->
    <link href="{{"app-assets/assets/plugins/c3-master/c3.min.css"}}" rel="stylesheet">
    <!-- Bootstrap Core CSS -->
    <link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
    <link href="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css"}}" rel="stylesheet">


    <!-- Date picker plugins css -->
    <link href="{{asset('app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />

    <!-- Custom CSS -->
    <link href="{{"app-assets/css/style.css"}}" rel="stylesheet">
    <!-- You can change the theme colors from here -->
    <link href="{{"app-assets/css/colors/blue.css"}}" id="theme" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/SlimImageCropper/slim.css')}}">
    
    @stack('links')
</head>

<body>

<div>
// Side Menu
</div>

<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->


<script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="{{"app-assets/assets/plugins/bootstrap/js/popper.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap/js/bootstrap.min.js"}}"></script>

<!-- slimscrollbar scrollbar JavaScript -->
<script src="{{"app-assets/js/jquery.slimscroll.js"}}"></script>
<!--Wave Effects -->
<script src="{{"app-assets/js/waves.js"}}"></script>
<!--Menu sidebar -->
<script src="{{"app-assets/js/sidebarmenu.js"}}"></script>
<!--stickey kit -->
<script src="{{"app-assets/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sparkline/jquery.sparkline.min.js"}}"></script>

<!--Custom JavaScript -->
<script src="{{"app-assets/js/custom.min.js"}}"></script>
<script src="{{asset('app-assets/SlimImageCropper/slim.kickstart.min.js')}}"></script>

<!-- Plugin JavaScript -->

<script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"}}"></script>

<!-- Sweet-Alert  -->
<script src="{{"app-assets/assets/plugins/sweetalert/sweetalert.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sweetalert/jquery.sweet-alert.custom.js"}}"></script>

<script src="{{"app-assets/assets/plugins/datatables/jquery.dataTables.min.js"}}"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->

<!-- ============web================================================== -->
<!-- chartist chart -->
{{--<script src="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.js"}}"></script>--}}
{{--<script src="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js"}}"></script>--}}
<!--c3 JavaScript -->

<!-- Date Picker Plugin JavaScript -->
<script src="{{'app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js'}}"></script>

<script src="{{"app-assets/assets/plugins/d3/d3.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/c3-master/c3.min.js"}}"></script>
<!-- Chart JS -->
{{--<script src="{{"app-assets/js/dashboard1.js"}}"></script>--}}
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="{{"app-assets/assets/plugins/styleswitcher/jQuery.style.switcher.js"}}"></script>

@stack('script')

</body>

</html>

    刀片文件 

    @extends('layouts.master')
@section('content')
@push('links')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
@endpush


<div class="row">
    <div class="col-md-12 ">
        <div class="panel panel-default">
            <div class="panel-heading">Full Calendar Example</div>

            <div class="panel-body">
                {!! $calendar->calendar() !!}
            </div>
        </div>
    </div>
</div>
@push('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
{!! $calendar->script() !!}
@endpush



@endsection

    【讨论】：

    • 我正在使用 phpStorm，但什么也没发生
    • 这是一个大文件，让我检查一下是否可以发布
    • jQuery is not defined 你得到这个错误只是因为 jquery.min.js 没有被调用。或者你在所有脚本之后调用它。
    • 检查我已经发布了主刀片
    • 你能把&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;放在&lt;title&gt;标签后面吗。我只是想检查一下。
    猜你喜欢
    • 1970-01-01
    • 2017-12-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode