Laravel 5 js被app.js阻止 [英] Laravel 5 js is blocking by app.js
问题描述
我正在 home.blade.php 中使用javascript，它扩展了 layout/app.blade.php
I am using a javascript inside home.blade.php it extends layout/app.blade.php
@extend(layout.app)
当我在 home.blade.php 中扩展javascript时，它停止工作，因此我将其注释掉
when I extend javascript inside home.blade.php stop working, So I commented out
< script src ="{{asset('js/app.js')}}""defer></script> 在 app.blade.php 中>然后javascript开始工作.我不确定是什么问题，任何人都可以帮助我解决此问题.
<script src="{{ asset('js/app.js') }}" defer></script> in app.blade.php then javascript starts working. I am not sure what is the issue can anyone help me to fix this.
home.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
@if (Auth::user()->email=='admin@admin.com')
<div class="card-header">Reports</div>
<div class="card-body">
<a href="view-reports">View Report</a><br>
<a href="create-user">Create User</a>
</div>
</div>
@else
<div class="card-header">Report Form</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
<!-- You are logged in! -->
@if(session()->has('message'))
<div class="alert alert-success">
{{ session()->get('message') }}
</div>
@endif
<form action="store" method="post">
<input type="hidden" name="name" value="{{Auth::user()->name}}">
<label for="check_log">Checked Logs </label><br>
<input type="radio" name="check_log" value="yes"> Yes
<input type="radio" name="check_log" value="no"> No<br><br>
<label for="verified_ticket"> Checked and Verified for pending tickets </label><br/>
<input type="radio" name="verified_ticket" value="yes"> Yes
<input type="radio" name="verified_ticket" value="no"> No<br><br>
<label for="ticket_found"> Found any ticket that can be done by you </label><br/>
<input type="radio" name="ticket_found" value="yes"> Yes
<input type="radio" name="ticket_found" value="no"> No<br><br>
<div id="box">
<label for="ticket_id"> Tickets done by you (INTERNAL Ticket ID'S) </label><br/>
<input type="text" name="ticket_id[]" id="name" class="name"><br/><br>
<label for="ticket_details"> what did you do</label><br/>
<input style="width: 65%; height: 100px;" type="text" name="ticket_details[]" width="200px" height="100px" value=""><br><br>
<label for="time"> Time Taken</label><br/>
<input type="text" name="time[]" id="name" class="name"><br/><br>
<div id="addmore">
<a href="#" id="add">Add More Input Field</a>
</div>
<br><br>
</div>
<label for="other_task"> Other Tasks (Should be specify what did you do and time taken for each task) </label><br/>
<input style="width: 65%; height: 100px;" type="" name="other_task" value=""><br><br>
<label for="shift_handoff"> Task/Alert that's needs attention from next shift/Dennis </label><br/>
<input style="width: 65%; height: 100px;" type="" name="shift_handoff" value=""><br><br>
<input type="checkbox" name="agree" value="agree"> I Agree<br><br>
<input type="hidden" name="_token" value="{{csrf_token()}}">
<input type="submit" name="submit" value="submit">
</form>
@endif
</div>
</div>
</div>
</div>
@endsection
@section('javascript')
<script type="text/javascript">
$(document).ready(function(){
$('#add').click(function(){
var inp = $('#box');
var i = $('input').size() + 1;
$('<div id="box' + i +'"><label for="ticket_id"> Ticket ID </label><br/><input type="text" name="ticket_id[]" id="name" class="name"><br/><br><label for="ticket_details[]"> what did you do</label><br/><input style="width: 65%; height: 100px;" type="text" name="ticket_details[]" width="200px" height="100px" value=""><br><br><label for="time"> Time Taken</label><br/><input type="text" name="time[]" id="name" class="name"><br><br><img src="Minus.png" width="32" height="32" border="0" align="top" class="add" id="remove" /><br><br> <div id="addmore"><a href="#" id="add">Add More Input Field</a></div><br><br></div>').appendTo(inp);
i++;
});
$('body').on('click','#remove',function(){
$(this).parent('div').remove();
});
});
</script>
@endsection
app.balde.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Daily report') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li><a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a></li>
<li><a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a></li>
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
<script src="{{ asset('js/app.js') }}"></script>
@yield('javascript')
</main>
</div>
</body>
</html>
推荐答案
您的app.blade.php应该如下所示:
Your app.blade.php should look like following:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Test') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
@yield('javascript');
</body>
</html>
可以这么说，以上是您的主要布局文件.如果要将其扩展到其他刀片文件中，则要使用该布局文件并添加内容或其他javascript功能.
The above is your main layout file so to say. You want to use that layout file and add content or additional javascript functionality if you want to extend it in your other blade files.
为了以一种很好的方式完成此操作，我们使用 @yield('javascript')关键字添加一个javascript文件或函数.
To accomplish this in a nice way, we use the @yield('javascript') keyword to add a javascript file or function.
因此扩展该刀片文件的其他刀片文件应如下所示:
So your other blade files which extend this blade file should look like following:
@extends('layouts.app')
@section('content')
// some content
@endsection
@section('javascript')
// your javascript
@endsection
首先，您正在加载布局刀片文件，然后，您可以在使用关键字 yield('xxx')
First you are loading the layout blade file and afterwards you can insert your specific content and javascript to each section where you used the keyword yield('xxx')
查看您的源代码之后:
您要在不理想的home.blade.php中加载jquery，如果要加载它，则应将其加载到主刀片php文件中.但是，如果您使用的是laravels默认的 app.js 文件，则实际上不需要加载它.默认的 app.js 文件已经需要以下 require('./bootstrap'); .如果您未更改该文件，则该文件已经包含jquery.
You are loading jquery in your home.blade.php which is not ideal, if you want to load it you should load it in your main blade php file. But you actually dont need to load it if you are using laravels default app.js file. The default app.js file already requires following require('./bootstrap');. That file already contains jquery if you did not change it.
try {
window.$ = window.jQuery = require('jquery');
} catch (e) {}
因此，请检查您的 app.js 是否需要引导文件，并检查引导文件是否包含jquery(如果是)，则无需在刀片文件中加载jquery.
So check if your app.js requires the bootstrap file and check if your bootstrap file includes jquery if yes, you do not need to load jquery in your blade file.
因此，您应该在主刀片服务器中加载 app.js 文件.像这样在底部加载它:
Thus you should load the app.js file in your main blade. Load it like this at the bottom:
...
<script src="{{ asset('js/app.js') }}"></script>
@yield('javascript')
</body>
</html>
这篇关于Laravel 5 js被app.js阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
