article

Friday, June 24, 2022

PHP MySQLi Delete Table Row using Sweetalert2

PHP MySQLi Delete Table Row using Sweetalert2

Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js

sweetalert2
https://sweetalert2.github.io/#download
index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
//index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>How to Delete Table Row using Sweetalert2 with PHP/MySQLi</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
     
    <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
 
    <style type="text/css">
        .mt20{
            margin-top:20px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 class="text-center mt20">PHP MySQLi Delete Table Row using Sweetalert2 </h1>
    <div class="row justify-content-center">
        <div class="col-sm-8">
            <table class="table table-bordered mt20">
                <thead>
                    <th>ID</th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Address</th>
                    <th>Action</th>
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
$(document).ready(function(){
    fetch();
  
    $(document).on('click', '.btn_delete', function(){
        var id = $(this).data('id');
  
        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){
                $.ajax({
                    url: 'ajaxfile.php?action=delete',
                    type: 'POST',
                    data: 'id='+id,
                    dataType: 'json'
                })
                .done(function(response){
                    swal.fire('Deleted!', response.message, response.status);
                    fetch();
                })
                .fail(function(){
                    swal.fire('Oops...', 'Something went wrong with ajax !', 'error');
                });
            }
  
        })
  
    });
});
  
function fetch(){
    $.ajax({
        method: 'POST',
        url: 'ajaxfile.php',
        dataType: 'json',
        success: function(response){
            $('#tbody').html(response);
        }
    });
}
</script>
</body>
</html>

Posted by ednalan at 8:24 PM . Under , .

Related Post