how to use jquery in a laravel child blade file
Question
Hello there I am new user of laravel 7. i want to use jquery in a blade file. if i create a blade file and on a top of it i mentioned all the head and body and then give the link of jquery in it then it works fine. but in my case i created a nav.blade.php file where i place all the navigation head and body code. then i create another file and extend the nav file on the top of that file but in this case jquery does not working
nav.blade.php code
<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 file this is the file where I want to use jquery and the upper file extended inside in this file
@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
on this file the jquery does not working. please help me
2 answers
solution1
1 2020-08-31 14:12:39
You need to follow Laravel Syntax and standards to do this. You can create a standard layout file for the application. Ie main.blade.php and in that file you can set the @yield the content which you need according to your requirements. For example your main.blade.php can be like this:
<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>
And Your nav.blade.php can look like this.
@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
Or you can follow up the components standard and can create a component for your scripts to be included where ever you like. You can read more about the Laravel links over here: https://laravel.com/docs/7.x/blade#components
solution2
0 2020-08-31 14:04:05
You only yield the content, you need to yield the script too
</nav>
@yield('content')
</body>
@yield('script')
</html>
Add that in the bottom of your code
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Cannot use jQuery in Laravel Blade file
How to use Laravel Blade in a script file?
How to use external PHP file in laravel blade.php file?
how to use different forms in one blade file in laravel 5.6
How to use a single file vue component in blade template laravel?
how to use if else condition in My blade file in Laravel Applications?
how to use multiple if statement in blade file in laravel5
How to use PHP echo string in .blade.php file Laravel
How to use constant value inside blade file - Laravel
how to use javascript variable into array in laravel blade file
Related Tags