How to delete specific image from bootstrap modal using ajax? - php

Question

I want to delete a specific image when user selected the red delete icon which is in the right side of each image .
screenshot-
ss after user click on deleted icon this shows up-
My php codes from where i took the img_id to delete and displaying all images-
<?php
include_once '../../php/connection.php';
$query = "SELECT * FROM img_info LEFT JOIN estate_infos ON img_info.estate_infos_id = estate_infos.id where img_info.estate_infos_id = $mdoalid";
$stmt=$dbcon->prepare($query);
$stmt->execute();
$count = $stmt->rowCount();
$datas=$stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($datas as $key => $data)
{ $pic = $data['image'];
$a=$data['img_id'];
?>
<img src="../<?php echo $pic ?>" width="360" height="150">
<a data-toggle="modal" data-target="#delimg<?php echo $a; ?>">
<i class="far fa-times-circle fa-2x" aria-hidden="true" style="color:red"></i></a>
<?php echo $a?> // displays the id of each image displayed (wont display in production)
My modal code -
<!-- Modal -->
<div class="modal fade" id="delimg<?php echo $data['img_id']; ?>" tabindex="-1" aria-labelledby="delimglabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="delimglabel">Delete Image</h5>
</div>
<div class="modal-body">
Are you sure you want to delete the image?
<?php echo $data['img_id'] ?>
</div>
<div class="modal-footer">
<button type="button" class="delbtn btn btn-sm btn-secondary text-white btn-danger">Delete</button>
//Here "delbtn" will trigger the ajax delete image from database
</div>
</div>
</div>
</div>
<?php } ?>
My ajax code which is i need to fix -
<script type="text/javascript">
$(document).ready(function() {
$(".delbtn").on("click", function(e) {
e.preventDefault();
alert("Working");
jQuery.ajax({
type: "POST",
url: "image-del.php",
data: < ? php echo $data['img_id'] ? > ,
success: function(response) {
alert('Image Deleted !');
},
error: function(response) {
alert('Image NOT Deleted !')
}
});
});
});
</script>
My mysql pdo code to delete image by id from database , this file name is "image-del.php"-
<?php
include_once 'connection.php';
if (isset($_POST['delbtn'])) {
$img_id = $_POST['img_id'];
$sql = "DELETE FROM img_info WHERE img_id=:img_id";
$stmt = $dbcon->prepare($sql);
$stmt->bindparam(':img_id', $img_id);
$stmt->execute();
?>
So, how can make the specific image get deleted by ajax properly?
-Thank you in advance

Answer 1

This is actually a two step process. Here's the idea:
First, as usual, render all the images along with their button to open the modal (the delete button to open the modal).
<?php foreach ($datas as $key => $data): ?>
<img src="../<?php echo $data['image'] ?>" width="360" height="150">
<a data-toggle="modal" data-target="#delete-modal" data-imgid="<?php echo $data['img_id']; ?>">
<i class="far fa-times-circle fa-2x" aria-hidden="true" style="color:red"></i>
</a>
<?php endforeach; ?>
You do not need to serve the HTML modal inside the loop. You only need one modal. You don't need each modal for each image.
So just change it to this and put it in the bottom of the page:
<div class="modal fade" id="delete-modal" tabindex="-1" aria-labelledby="delimglabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="delimglabel">Delete Image</h5>
</div>
<div class="modal-body">Are you sure you want to delete the image?</div>
<div class="modal-footer">
<button type="button" class="delbtn btn btn-sm btn-secondary text-white btn-danger" data-delete-imgid="">Delete</button>
</div>
</div>
</div>
</div>
After that, you need to trigger an event when the modal opens, get the image id and put it in the data attribute, so that it is used and can be accessed when you make the final request to delete it and send it to the server:
$('#delete-modal').on('show.bs.modal', function(e) { // when the delete modal opens
var imageId = $(e.relatedTarget).data('imgid'); // get the image id
$(e.currentTarget).find('.delbtn').attr('data-delete-imgid', imageId); // and put it in the delete button that calls the AJAX
});
Then like I said above the comments, don't echo the PHP image id in there. Use the ID that you applied in the button:
$(".delbtn").on("click", function(e) {
e.preventDefault();
jQuery.ajax({
type: "POST",
url: "image-del.php",
data: { delbtn: $(this).attr('data-delete-imgid') }
success: function(response) {
alert('Image Deleted !');
},
error: function(response) {
alert('Image NOT Deleted !')
}
});
});
This should serve as a general idea on how to pass the ID from the delete button to the modal, then finally to the server.