Laravel with Sweet Alert 安裝教學

• 10 5 月, 2020
|
• Laravel, 文章
|
|
• No comments

前言

在這裡我會教你如何導入Sweetalert 進入你的專案， 比較常用的地方是當使用者要刪除項目的時候有一個確認的動作。這個動作可以提升使用者體驗。那我們就廢話不多說，開始教學把。

1. 先安裝 sweetalert

npm i sweetalert

2. 導入你的laravel 專案, 記得用laravel mix build一下

// app.js
const swal = (window.swal = require("sweetalert2"));

//layout.blade.php
// 確認你的專案有導入 javascript
<script src="{{ asset('js/app.js') }}"></script>

3. 然後在你的blade，測試一下看看有沒有導入成功

// blade.php
<script>
    swal.fire('Any fool can use a computer')
</script>

4. 成功後，規劃我們的刪除(delete)流程首先route web.php 把 delete改成get

// 原本
Route::delete('/purchase-orders/{purchase_order}', 'Procurement\PurchaseOrdersController@destroy')->name('procurement-po-delete');

// 改成
Route::get('/purchase-orders/delete/{purchase_order}', 'Procurement\PurchaseOrdersController@destroy')->name('procurement-po-delete');

5.然後在你的blade要改兩個地方， 第一個是把原本的delete方法改成get

// 原本
<form method="POST"
    action="{{ route('procurement-po-delete', ['purchase_order' => $purchase_order]) }}">
    @csrf
    {{ method_field('DELETE') }}
    <input type="submit" class=" text-red-500 font-medium ml-2" value="刪除" />
</form>

// 改成
<a href="/procurement/purchase-orders/delete/{{$purchase_order->id}}"
class="text-red-500 delete-confirm font-medium ml-2">刪除</a>

6. 然後在這一隻的blade 下方輸入 Javascript。我這邊是一個清單所以我的Javascript是用Array寫的。然後增加Event Listener。然後當使用者按下 Yes, Delete。的時候執行以下的promise function.

<script>
    var deleteBtns = document.getElementsByClassName('delete-confirm')
    var deleteBtnsArray = Array.prototype.slice.call(deleteBtns);

    deleteBtnsArray.forEach(function (deleteBtn) {
        deleteBtn.addEventListener('click', function (event) {
            event.preventDefault();
            const url = event.target.href
            console.log(url)
            swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.value) {
                    swal.fire(
                        'Deleted!',
                        'Your file has been deleted.',
                        'success'
                    )
                    window.location.href = url
                }
            })
        })
    })

</script>

這樣子就完成了。希望這篇文章有幫助到你。

影片教學

資源

Delete confirmation Alert Dialog using Sweetalert in Laravel