Javascript onclick功能不工作laravel刀片

Question

在使用sweetalert2刪除之前開發需要確認的刪除功能。 這是我的代碼嘗試過

<button class="btn btn-danger waves-effect" type="button" onclick="book({{ $book->id }})">delete</button>
<form id="delete-form-{{ $book->id }}" action="{{ url('/library/books/', ['id' => $book->id]) }}" method="POST">
    {!! method_field('delete') !!}
    {!! csrf_field() !!}
</form>

這是我的javascript，我正在推動我的主刀片

<script type="text/javascript">
function book(id) {
    swal({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, cancel!',
        confirmButtonClass: 'btn btn-success',
        cancelButtonClass: 'btn btn-danger',
        buttonsStyling: false,
        reverseButtons: true
    }).then((result) => {
        if (result.value) {
            event.preventDefault();
            document.getElementById('delete-form-'+id).submit();
        } else if (
            // Read more about handling dismissals
            result.dismiss === swal.DismissReason.cancel
        ) {
            swal(
                'Cancelled',
                'Your data is safe :)',
                'error'
            )
        }
    })
}

在主刀片中使用堆棧

@stack('customjs')

單擊刪除按鈕時出錯。 錯誤是

books:4 Uncaught ReferenceError: book is not defined
at HTMLButtonElement.onclick (books:4)

如何在刪除項目之前解決此問題並顯示甜蜜警報？

Answer 1

在您的主刀片底部或標題

@stack('customjs')

在你的刀片

@push('customjs')
<script type="text/javascript">
    function book()
    {
        //enter code here
    }
</script>
@endpush

你的按鈕

<button class="btn btn-danger waves-effect" type="button" onclick="book({{ $book->id }})">delete</button>

---

如果你使用laravel你可以使用jquery使它更容易。

你的按鈕

<button class="btn btn-danger waves-effect clickHandleButton" type="button">delete</button>
<form action="{{ url('/library/books/', ['id' => $book->id]) }}" method="POST">
    {!! method_field('delete') !!}
    {!! csrf_field() !!}
</form>

你的javascript

$(document).on('click', '.clickHandleButton', (e) => { //replaces function book()
   $(e.currentTarget).next('form').submit();
   //find the form next to the clicked button and submit the form.
});