Một ví dụ tuyệt vời Ajax SweetAlert for Live Data Deleting Rows in with PHP~MySQL~Ajax (ok)
Previoussử dụng php kết hợp Sweetalert2 (ok)NextSweetAlert makes popup messages easy and pretty (page learn) (kiể cũ)
Last updated
Advanced Javascript
Last updated
<?php
$DBhost = "localhost";
$DBuser = "root";
$DBpass = "";
$DBname = "dbtest";
try {
$DBcon = new PDO("mysql:host=$DBhost;dbname=$DBname", $DBuser, $DBpass);
$DBcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $ex) {
die($ex->getMessage());
}index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax SweetAlert for Live Data Deleting Rows in with PHP~MySQL~Ajax</title>
<link rel="stylesheet" href="http://localhost/library/bootstrap/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://localhost/library/sweetalert2/sweetalert2.min.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/library/fontawesome/css/all.min.css"/>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>
<a target="_blank" href="http://www.lisenme.com/">Ajax SweetAlert for Live Data Deleting Rows in with PHP~MySQL~Ajax</a>
</h1>
</div>
<div id="load-products"></div> <!-- products will be load here -->
</div>
<script type="text/javascript" src="http://localhost/library/jquery/jquery.min.js"></script>
<script src="http://localhost/library/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://localhost/library/sweetalert2/sweetalert2.min.js"></script>
<script>
$(document).ready(function() {
readProducts(); /* it will load products when document loads */
$(document).on('click', '#delete_product', function(e) {
var productId = $(this).data('id');
SwalDelete(productId);
e.preventDefault();
});
});
function SwalDelete(productId) {
swal({
title: 'Are you sure?',
text: "It will be deleted permanently!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
showLoaderOnConfirm: true,
preConfirm: function() {
return new Promise(function(resolve) {
$.ajax({
url: 'delete.php',
type: 'POST',
data: 'delete=' + productId,
dataType: 'json'
})
.done(function(response) {
swal('Deleted!', response.message, response.status);
readProducts();
})
.fail(function() {
swal('Oops...', 'Something went wrong with ajax !', 'error');
});
});
},
allowOutsideClick: false
});
}
function readProducts() {
$('#load-products').load('read.php');
}
</script>
</body>
</html>read.php
<div class="table-responsive">
<table class="table table-bordered table-condensed table-hover table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Application</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
require_once 'dbconfig.php';
$query = "SELECT product_id, product_name FROM tbl_products";
$stmt = $DBcon->prepare($query);
$stmt->execute();
if ($stmt->rowCount() > 0) {
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
extract($row);
?>
<tr>
<td><?php echo $product_id; ?></td>
<td><?php echo $product_name; ?></td>
<td><a class="btn btn-sm btn-danger" id="delete_product" data-id="<?php echo $product_id; ?>" href="javascript:void(0)"><i class="far fa-trash-alt"></i></a></td>
</tr>
<?php
}
} else { ?>
<tr>
<td colspan="3">No Products Found</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div><?php
header('Content-type: application/json; charset=UTF-8');
$response = array();
if ($_POST['delete']) {
require_once 'dbconfig.php';
$pid = intval($_POST['delete']);
$query = "DELETE FROM tbl_products WHERE product_id=:pid";
$stmt = $DBcon->prepare( $query );
$stmt->execute(array(':pid'=>$pid));
if ($stmt) {
$response['status'] = 'success';
$response['message'] = 'Product Deleted Successfully ...';
} else {
$response['status'] = 'error';
$response['message'] = 'Unable to delete product ...';
}
echo json_encode($response);
}