Cześć! Tak mi teraz przyszło do głowy zrobić pewną rzecz. Chciałbym dodać Ajaxa do usuwania rekordów tzn. chcę użyć do tego sweet alerts (urozmaicenie). Wiem jak to zrobić z osobnym plikiem php. (np. delete.php), ale chciałbym to zrobić w jednym pliku. Czy jest taka opcja? Poniżej kod. (nie patrzcie na internal styles, testowe tylko).
<?php
$pdo = new PDO("mysql:host=localhost;dbname=checkbox;", "xxx", "xxx");
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
$response = array();
if(isset($_POST['check'])) {
$checkboxes = $_POST['check'];
$stmt = $pdo->query("DELETE FROM cards WHERE card_id = {$checkboxes}");
if($stmt) {
$response['status'] = 'Success';
$response['message'] = 'Product deleted successfully!';
} else {
$response['status'] = 'Error';
$response['message'] = 'Unable to delete product!';
}
echo json_encode($response);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700&subset=latin-ext" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<style>
html {
font-family: 'Titillium Web', sans-serif;
}
.container {
width: 1180px;
margin-left: auto;
margin-right: auto;
}
.row {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.outer {
display: flex;
justify-content: center;
margin-top: 120px;
font-family: 'Titillium Web', sans-serif;
font-size: 14px;
}
.card {
width: 200px;
border: 1px solid #fff;
border-radius: 10px;
transition: .2s all;
padding: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: .5rem;
}
.card-image {
text-align: center;
}
.card-title {
text-align: center;
font-size: 1.7rem;
}
.card-subtitle {
text-align: center;
font-size: 1rem;
}
.card:hover,
.card.selected {
cursor: pointer;
border-color: #e0e2e5;
box-shadow: 0px 0px 22px -6px rgba(0,0,0,0.75);
transform: translateY(-10px);
}
.card .checkbox {
visibility: hidden;
}
.btn {
display: inline-block;
padding: .75rem 1.25rem;
border: none;
outline: none;
background: #007bff;
border-radius: .5rem;
font-weight: bold;
color: white;
}
</style>
<body>
<div class="container">
<form action="" method="post">
<div class="row">
<?php
$stmt = $pdo->query("SELECT * FROM cards")->fetchAll();
foreach($stmt as $card):
?>
<div class="card checkbox">
<div class="card-image">
<img src="https://i.imgur.com/bnhD3IO.png" alt="">
</div>
<div class="card-title"><?php echo $card['card_title']; ?></div>
<div class="card-subtitle"><?php echo $card['card_subtitle']; ?></div>
<input type="checkbox" class="checkbox" name="check" data-id="<?php echo $card['card_id']; ?>" value="<?php echo $card['card_id']; ?>">
</div>
<?php endforeach; ?>
</div>
<button type="submit" name="submit" class="btn" href="javascript:void(0)">Delete selected</button>
</form>
</div>
</body>
</html>
<script>
(function selectCards(){
let cards = document.querySelectorAll('.card');
for(let card of cards) {
let checkbox = card.querySelector('.card .checkbox');
card.addEventListener('click', function(){
if(card.classList.contains('selected')) {
card.classList.remove('selected');
checkbox.checked = false;
} else {
card.className += ' selected';
checkbox.checked = true;
}
});
}
})();
$(document).ready(function(){
$(document).on('click', '.checkbox', function(e){
var productId = $(this).attr("value");
console.log(productId);
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: 'index.php',
type: 'POST',
data: {'check':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
});
}
</script>
