[英]how to use jquery in a laravel child blade file
您好,我是 laravel 的新用户 7. 我想在刀片文件中使用 jquery。 如果我创建一个刀片文件并在其顶部提到所有头部和身体,然后在其中提供 jquery 的链接,那么它就可以正常工作。 但在我的例子中,我创建了一个 nav.blade.php 文件,我在其中放置了所有导航头和主体代码。 然后我创建另一个文件并在该文件的顶部扩展导航文件,但在这种情况下 jquery 不起作用
nav.blade.php代码
<html>
<head>
<meta charset="utf-8">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- the below i use for jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{'addcategory'}}">Add Catgory <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{'showcategory'}}">show Category</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{'
addproducts'}}">Add Products</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
@yield('content')
</body>
</html>
showcategories.blade.php 文件这是我要使用 jquery 的文件,上面的文件在这个文件里面扩展
@extends('layouts.nav')
@section('content')
<table class="table">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">name</th>
<th scope="col">Delete</th>
<th scope="col">Update</th>
<th scope="col">Get Products</th>
</tr>
</thead>
<tbody>
@foreach($categories as $cat)
<tr>
<td>{{$cat->id}}</td>
<td>{{$cat->name}}</td>
<td><a class="btn btn-danger" href="{{url('delete',$cat->id)}}">Delete</a> </td>
<td><a class="btn btn-danger" href="{{url('update',$cat->id)}}">update</a> </td>
<td><a class="btn btn-danger" href="{{url('getproductjoin',$cat->id)}}">getproducts</a> </td>
</tr>
@endforeach
</tbody>
</table>
<button id="hello" class="btn btn-danger">hello</button>
@endsection
@section('script')
<script >
$(document).ready(function() {
$("#hello").click(function () {
alert("hello there");
})
});
</script>
@endsection
在此文件上,jquery 不起作用。 请帮我
您需要遵循 Laravel 语法和标准来执行此操作。 您可以为应用程序创建标准布局文件。 即main.blade.php
,在该文件中,您可以根据需要设置@yield
所需的内容。 例如你的 main.blade.php 可以是这样的:
<html>
<head>
<meta charset="utf-8">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- the below i use for jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{'addcategory'}}">Add Catgory <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{'showcategory'}}">show Category</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{'
addproducts'}}">Add Products</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
@yield('content')
</body>
@yield('scripts')
</html>
你的 nav.blade.php 看起来像这样。
@extends('layouts.main')
@section('content')
<table class="table">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">name</th>
<th scope="col">Delete</th>
<th scope="col">Update</th>
<th scope="col">Get Products</th>
</tr>
</thead>
<tbody>
@foreach($categories as $cat)
<tr>
<td>{{$cat->id}}</td>
<td>{{$cat->name}}</td>
<td><a class="btn btn-danger" href="{{url('delete',$cat->id)}}">Delete</a> </td>
<td><a class="btn btn-danger" href="{{url('update',$cat->id)}}">update</a> </td>
<td><a class="btn btn-danger" href="{{url('getproductjoin',$cat->id)}}">getproducts</a> </td>
</tr>
@endforeach
</tbody>
</table>
<button id="hello" class="btn btn-danger">hello</button>
@endsection
@section('scripts')
<script >
$(document).ready(function() {
$("#hello").click(function () {
alert("hello there");
})
});
</script>
@endsection
或者您可以遵循组件标准,并可以为您的脚本创建一个组件,以将其包含在您喜欢的任何地方。 您可以在此处阅读有关 Laravel 链接的更多信息: https://laravel.com/docs/7.x/blade#components
你只需要 yield 内容,你还需要 yield 脚本
</nav>
@yield('content')
</body>
@yield('script')
</html>
将其添加到代码的底部
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.