:::

15-2 加入刪除確認

一、載入SweetAlert2

  1. 直接刪除實在太可怕,一個不小心就會把所有資料刪掉,因此,在刪除之前加個確認動作會比較好一點
  2. 開啟\專案\resources\views\layouts\app.blade.php主視圖,引入js以及子視圖,並新增一個 @yield 命令,已方便各個子視圖放置一些各自的 javascript 語法:
    <!DOCTYPE html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
    
        <title>{{ config('app.name', 'Laravel') }}</title>
    
        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://unpkg.com/sweetalert2@7.18.0/dist/sweetalert2.all.js"></script>
    
    
        <!-- 中間略 -->
    
        @yield('js')
    </body>
    
    </html>

二、題目的確認後刪除 

  1. 開啟\專案\resources\views\layouts\show.blade.php子視圖,先把刪除題目的按鈕簡化為一般的按鈕,在class中,我們加入btn-del-topic好讓jquery可以偵測刪除題目的按鈕是否有被按下,並利用data-id來紀錄題目編號,等一下刪除時會用到。
    <h3>            
    @can('建立測驗')
        <button type="button" class="btn btn-danger btn-del-topic" data-id="{{ $topic->id }}">刪除</button>
        <a href="{{route('topic.edit', $topic->id)}}" class="btn btn-warning">編輯</a>
        ({{$topic->ans}})
    @endcan
    {{ bs()->badge()->text($key+1) }}
    {{ $topic->topic }}
    </h3>
  2. 接著在同一個檔案下方,利用@section('js')加入 sweetalert2 語法,語法可參考https://sweetalert2.github.io/
    @section('js')
        <script>
            $(document).ready(function(){
                $('.btn-del-topic').click(function(){
                    var topic_id=$(this).data('id');                
                    swal({
                        title: "確定要刪除題目嗎?",
                        text: "刪除後該題目就消失救不回來囉!",
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "是!含淚刪除!",
                        cancelButtonText: "不...別刪",
                    }).then((result) => {
                        if (result.value) {                        
                            axios.delete('/topic/' + topic_id)
                            .then(function(){
                                return swal("OK!刪掉題目惹!", "該題目已經隨風而逝了...", "success");
                            }).then(function () {
                                location.reload();
                            });
                        }
                    })
                });
            });
        </script>
    @endsection
    • 利用 $('.btn-del-topic').click()來偵測該刪除按鈕被按下的事件。
    • 利用jquery的data()函數取的data-id的值,這樣才知道要刪除哪一篇
    • 若使用者有按確定刪除,我們就利用axios以ajax的方式來執行HTTP的刪除動作,關於axios的使用可參考:https://www.kancloud.cn/yunye/axios/234845
    • 刪除後,會執行location.reload();以更新畫面
  3. 由於刪除已經改成用ajax的方式來執行,因此,我們修改題目的控制器\專案\app\Http\Controllers\TopicController.php,把刪除的部份再簡化(無須轉向),到此,題目的確認後刪除就大公告成了!
    public function destroy(Topic $topic)
    {
        $topic->delete();
    }

三、測驗的確認後刪除 

  1. 一樣開啟\專案\resources\views\layouts\show.blade.php子視圖,先把測驗的刪除按鈕簡化為一般的按鈕,在class中,我們加入btn-del-exam好讓jquery可以偵測測驗的刪除按鈕是否有被按下,並利用data-id來紀錄測驗編號。
    <h1 class="text-center">
        {{$exam->title}}
        @can('建立測驗')            
            <button type="button" class="btn btn-danger btn-del-exam" data-id="{{ $exam->id }}">刪除</button>
            <a href="{{route('exam.edit', $exam->id)}}" class="btn btn-warning">編輯</a>
        @endcan
    </h1>
  2. 接著在@section('js')裡面再加上測驗刪除的事件,複製上方得來修改即可。
    // 刪除按鈕點擊事件
    $('.btn-del-exam').click(function() {
        // 獲取按鈕上 data-id 屬性的值,也就是編號
        var id = $(this).data('id');
        // 調用 sweetalert
        swal({
            title: "確定要刪除測驗嗎?",
            text: "刪除後該測驗連同所有題目就消失救不回來囉!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "是!含淚刪除!",
            cancelButtonText: "不...別刪",
        }).then((result) => {
            if (result.value) {
                swal("OK!刪掉測驗惹!", "該測驗所有資料已經隨風而逝了...", "success");
                // 調用刪除介面,用 id 來拼接出請求的 url
                axios.delete('/exam/' + id).then(function () {
                    location.href='/exam';
                });
            }
        });
    });
    • 利用 $('.btn-del-exam').click()來偵測測驗刪除按鈕被按下的事件。
    • 利用jquery的data()函數取的data-id的值,這樣才知道要刪除哪一篇測驗
    • 刪除後,會執行location.href做轉向。
  3. 接著修改題目的控制器\專案\app\Http\Controllers\ExamController.php,一樣把刪除的部份再簡化即可!
    public function destroy(Exam $exam)
    {
        $exam->delete();
    }

到GitHub觀看此單元程式異動


:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D37%26tbdsn%3D1238

計數器

今天: 1426142614261426
昨天: 1416141614161416
總計: 7340073734007373400737340073734007373400737340073