问题
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.
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.
Here is my 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>
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.
Why isn't this script working at all??? Is the app.jscausing the trouble? How do I make it work?
If only I could see the console.log() working, that'd be nice!
回答1:
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
You can read about Stack
来源：https://stackoverflow.com/questions/55963663/laravel-custom-javascript-on-blade-is-not-working