未捕獲的ReferenceError：$未定義laravel
[英]Uncaught ReferenceError: $ is not defined laravel
問題描述
您好，我是laravel的新手，我正在按照本教程來構建學生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>
我還有另一個頁面，該頁面包含用於添加課程的表單以及用於datepicker和模態的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">×</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 個解決方案
解決方案1
4 已采納 2017-08-15 16:35:48
你的部分@yield("script")需要去后 <script src="/js/jquery.js"></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>
要么
...
<script src="/js/charts.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
@yield('script')
</body>
通常，每當我對js執行@yield ，我都會在master布局中的所有其他<script>標記之后執行此操作，但是只要您知道依賴項已在調用之前加載，就可以了。
Laravel Mix Uncaught ReferenceError: $ is not defined
[英]Laravel Mix Uncaught ReferenceError: $ is not defined
Laravel Mix：未捕獲ReferenceError：未定義ScrollMagic
[英]Laravel Mix: Uncaught ReferenceError: ScrollMagic is not defined
未捕獲的 ReferenceError：Laravel mix 中未定義圖表
[英]Uncaught ReferenceError: Chart is not defined in Laravel mix
未捕獲的 ReferenceError ReferenceError：未定義事項
[英]Uncaught ReferenceError ReferenceError: Matter is not defined
未捕獲的 ReferenceError ReferenceError：未定義問題
[英]Uncaught ReferenceError ReferenceError: question is not defined
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
Laravel未捕獲ReferenceError：$未定義
未捕獲的ReferenceError：未定義jQuery Laravel
未捕獲的參考錯誤：日歷未在 laravel 中定義
Laravel Mix Uncaught ReferenceError: $ is not defined
未捕獲的 ReferenceError：Laravel 8 中未定義路由
Laravel Mix：未捕獲ReferenceError：未定義ScrollMagic
laravel 回聲：“未捕獲的參考錯誤：未定義回聲”
未捕獲的 ReferenceError：Laravel mix 中未定義圖表
未捕獲的 ReferenceError ReferenceError：未定義事項
未捕獲的 ReferenceError ReferenceError：未定義問題
相關標簽