:::
15-1 刪除測驗
15-2 加入刪除確認
一、載入SweetAlert2
- 直接刪除實在太可怕，一個不小心就會把所有資料刪掉，因此，在刪除之前加個確認動作會比較好一點
- 開啟
\專案\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/[email protected]/dist/sweetalert2.all.js"></script> <!-- 中間略 --> @yield('js') </body> </html>
二、題目的確認後刪除
- 開啟
\專案\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> - 接著在同一個檔案下方，利用
@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();以更新畫面
- 利用
- 由於刪除已經改成用ajax的方式來執行，因此，我們修改題目的控制器
\專案\app\Http\Controllers\TopicController.php，把刪除的部份再簡化（無須轉向），到此，題目的確認後刪除就大公告成了！public function destroy(Topic $topic) { $topic->delete(); }
三、測驗的確認後刪除
- 一樣開啟
\專案\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> - 接著在
@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做轉向。
- 利用
- 接著修改題目的控制器
\專案\app\Http\Controllers\ExamController.php，一樣把刪除的部份再簡化即可！public function destroy(Exam $exam) { $exam->delete(); }
