刀片上的Laravel自定义javascript无法正常工作 [英] Laravel custom javascript on blade is not working
问题描述
在这种情况下，我想将数据传递给Bootstrap 4模式.我有一个记录列表，并带有自己的链接以进行编辑和删除.由于我想加载模式确认以删除特定记录，因此需要传递多个参数，例如销毁路线的ID.
I have this situation where I want to pass data to a Bootstrap 4 modal. I have a list of records with their own links to edit and delete. Since I want to load a modal confirmation to delete a specific record, I need to pass several parameters, such as the ID for the destroy route.
I have tried the solution of this Laracasts forum. However, first of all, the script does not work, since the console.log does not output anything.
注意:我正在使用 app.js ，因此可能与该问题有关，但是我没有找到解决此问题的提示.
Note: I am using the app.js, so probably it has to do with the issue, but I haven't found a hint to solve this.
这是我的 accounts.blade.php :
@extends('layouts.app')
@section('title','Accounts list')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col">
<div class="card">
<div class="card-header">
My accounts
</div>
<div class="card-body">
<h5 class="card-title">Accounts list</h5>
<h4><a href="{{ route('accounts.create') }}" class="btn btn-success">Create a new account</a></h4>
<hr>
<ul>
@forelse ($user->accounts as $account)
<li>
<a href="{{ route('accounts.show',$account->id) }}" title="Your accounts blah">{{ $account->name }}</a> || <a href="{{ route('accounts.edit', $account->id) }}">Edit</a> |
<button type="button" class="btn btn-outline-danger delete-company"
data-toggle="modal"
data-target="#exampleModal"
data-id="{{$account->id}}"
data-url="{{ route('accounts.destroy',['id'=>$account->id]) }}"
data-name="{{$account->name}}"
>
Delete
</button>
{{--<a href="{{ route('accounts.destroy',$account->id) }}">Delete</a> </li>--}}
{{--read this reference: https://medium.freecodecamp.org/custom-confirm-box-with-bootstrap-4-377aa67723c2--}}
<hr>
</li>
@empty
<li class="card-text text-danger">You do not have an account yet.</li>
@endforelse
</ul>
</div>
</div>
</div>
</div>
</div>
{{--MODAL delete confirmation modal--}}
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Are you sure to delete the <span id="accountname"></span> account?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Everything will be removed.
</div>
<div class="modal-footer">
{{--https://stackoverflow.com/a/33688683/1883256--}}
<form id="deleteform" action="" method="POST">
@csrf
@method('DELETE')
{{--
{{ csrf_field() }}
{{ method_field('DELETE') }}
--}}
<button type="submit" class="btn btn-outline-danger btn-sm">Yes, delete</button>
</form>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
@endsection
@section('js')
{{--Ver: https://laracasts.com/discuss/channels/laravel/how-to-pass-value-to-bootstrap-modal-window?page=1#reply=508543 --}}
<script>/*NOTHING HERE IS WORKING! WHY???*/
$(document).ready(function () {
console.log('testing'); // NOT WORKING!
// For A Delete Record Popup
$('.delete-company').click(function () {
console.log('clicked!'); //NOT WORKING!!!
var id = $(this).attr('data-id');
var name = $(this).attr('data-name');
var url = $(this).attr('data-url');
$("#accountname").append(name);
$("#deleteForm", 'input').val(id);
$("#deleteForm").attr("action", url);
});
});
</script>
@endsection
layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }} - @yield('title')</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
{{--Favicon--}}
<link rel="shortcut icon" href="{{ asset('img/favicon_io/favicon-16x16.png') }}">
</head>
<body>
<div id="app">
@include('layouts.partials._nav')
<div class="container">
<main class="py-3">
{{--Flash messages--}}
@include('layouts.partials.flashMessages._messages_x')
@include('layouts.partials.flashMessages._messages')
@yield('content')
</main>
</div>
</div>
</body>
</html>
关于布局 app.blade.php 我已经尝试了< script src ="{{asset('js/app.js')}}""defer></script> 和< script src =" {{asset('js/app.js')}}></script> 没有 defer ，并且不起作用.
As for the layouts app.blade.php
I have tried both <script src="{{ asset('js/app.js') }}" defer></script> and <script src="{{ asset('js/app.js') }}"></script> without the defer and it does not work.
为什么这个脚本根本不起作用???是 app.js 引起麻烦吗?我该如何运作?
Why isn't this script working at all??? Is the app.jscausing the trouble? How do I make it work?
如果只有我能看到 console.log()正常工作，那就太好了！
If only I could see the console.log() working, that'd be nice!
推荐答案
以正确的方式尝试做一件事
Do one thing with proper way try this
layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }} - @yield('title')</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
{{--Favicon--}}
<link rel="shortcut icon" href="{{ asset('img/favicon_io/favicon-16x16.png') }}">
</head>
<body>
<div id="app">
@include('layouts.partials._nav')
<div class="container">
<main class="py-3">
{{--Flash messages--}}
@include('layouts.partials.flashMessages._messages_x')
@include('layouts.partials.flashMessages._messages')
@yield('content')
</main>
</div>
</div>
@stack('scripts')
</body>
</html>
accounts.blade.php
@extends('layouts.app')
@section('title','Accounts list')
@section('content')
//your content
@endsection
@push('scripts')
<script>
console.log('hello');
</script>
@endpush
您可以阅读有关堆栈
这篇关于刀片上的Laravel自定义javascript无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
