如何在 laravel 子刀片文件中使用 jquery

Question

Hello there I am new user of laravel 7. i want to use jquery in a blade file.您好，我是 laravel 的新用户 7. 我想在刀片文件中使用 jquery。 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.如果我创建一个刀片文件并在其顶部提到所有头部和身体，然后在其中提供 jquery 的链接，那么它就可以正常工作。 but in my case i created a nav.blade.php file where i place all the navigation head and body code.但在我的例子中，我创建了一个 nav.blade.php 文件，我在其中放置了所有导航头和主体代码。 then i create another file and extend the nav file on the top of that file but in this case jquery does not working然后我创建另一个文件并在该文件的顶部扩展导航文件，但在这种情况下 jquery 不起作用

nav.blade.php code 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 file this is the file where I want to use jquery and the upper file extended inside in this file 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

on this file the jquery does not working.在此文件上，jquery 不起作用。 please help me请帮我

Answer 1

You need to follow Laravel Syntax and standards to do this.您需要遵循 Laravel 语法和标准来执行此操作。 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.即main.blade.php ，在该文件中，您可以根据需要设置@yield所需的内容。 For example your main.blade.php can be like this:例如你的 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>

And Your nav.blade.php can look like this.你的 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

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您可以在此处阅读有关 Laravel 链接的更多信息： https://laravel.com/docs/7.x/blade#components

Answer 2

You only yield the content, you need to yield the script too你只需要 yield 内容，你还需要 yield 脚本

</nav>
@yield('content')
</body>
@yield('script')
</html>

Add that in the bottom of your code将其添加到代码的底部

如何在 laravel 子刀片文件中使用 jquery

问题描述

2 个解决方案

解决方案1
1 2020-08-31 14:12:39

解决方案2
0 2020-08-31 14:04:05

如何在 laravel 子刀片文件中使用 jquery

问题描述

2 个解决方案

解决方案1 1 2020-08-31 14:12:39

解决方案2 0 2020-08-31 14:04:05

解决方案1
1 2020-08-31 14:12:39

解决方案2
0 2020-08-31 14:04:05