[英]Laravel custom javascript on blade is not working
在這種情況下,我想將數據傳遞給Bootstrap 4模式。 我有一個記錄列表,並帶有自己的鏈接以進行編輯和刪除。 由於我想加載模式確認以刪除特定記錄,因此需要傳遞多個參數,例如銷毀路線的ID。
我已經嘗試過該Laracasts論壇的解決方案。 但是,首先,該腳本不起作用,因為console.log不會輸出任何內容。
注意 :我正在使用app.js
,所以可能與問題有關,但是我沒有找到解決此問題的提示。
這是我的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
,它將不起作用。
為什么這個腳本根本不起作用??? 是app.js
引起麻煩嗎? 我該如何運作?
如果我能看到console.log()
正常運行,那就太好了!
用正確的方法做一件事情嘗試一下
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
您可以閱讀有關堆棧的信息
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.