Delete data from table with AJAX and PHP - php

Question

Can you explain me where is the problem? Because I lost all my hope for this...
Insert and load work but delete not... When I remove if statement from delete, it says id is undefined index. But why it should be undefined when I define it in var id = $(this).data("id3"); I think the problem will be somewhere in select.php with a button.
I have lack of experience with AJAX so I ask you for help with this problem.
Thank you for response. (sorry for the language)
Index.php
$('.btn_delete').on('click', function()
{
var id = $(this).data("id3");
if (confirm('Naozaj zmazat ?')) {
$.ajax({
url: 'delete.php',
type: 'POST',
data: {delete: 1, id: id},
success: function(data)
{
alert(data);
fetch_data();
}
});
}
});
delete.php
if (isset($_POST['delete'])) {
include("db.php");
$id = mysqli_real_escape_string($conn, $_POST['id']);
$sql = "DELETE FROM suciastka WHERE id_suciastka = '".$id."'";
if (mysqli_query($conn, $sql)) {
echo "Deleted";
}
}
And here is my select.php
include("db.php");
$output = "";
$sql = "SELECT * FROM suciastka";
$result = mysqli_query($conn, $sql);
$output .= "
<div class='table-responsive'>
<table class='table table-bordered'>
<tr>
<th>ID</th>
<th>NAME</th>
<th>NUMBER</th>
<th>PLACE</th>
<th>DESCR</th>
<th>ACTION</th>
</tr>";
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_array($result))
{
$output .= "
<tr>
<td>".$row['id_suciastka']."</td>
<td>".$row['name_suciastka']."</td>
<td>".$row['number_suciastka']."</td>
<td>".$row['place_suciastka']."</td>
<td>".$row['descr_suciastka']."</td>
<td><button type='button' name='delete_btn' data-id3='".$row['id_suciastka']."' class='btn btn-danger btn_delete'>Delete</button></td>
</tr>";
}
}
$output .= "</table>
</div>";
echo $output;

Answer 1

Let's debug this code step by step :
First of all, we should check the content of $_POST in your PHP code :
die(var_dump($_POST)); at the top of delete.php.
Do you see your id?
If yes, then... Just be sure you typed the right index name :)
If no, we have to get closer to the browser :
Open your code inspector (Ctrl+Maj+I on chrome), get to the Network panel. When you fire your AJAX query, a new line will apper! Just click on it, you will find in the "Headers" section all data about request/Response, and at the bottom you'll find the data you sent!
Do you see your id?
If yes, then there is code you didn't show us that do whatever something that erase your data or something ^^
If no, let's take a look in the javascript :
Still in the Inspector, open the "source" pannel and find your index.php, and more precisely the code you sent us.
Just add a marker after your var id = ... by clicking on the line numbers.
Fire your ajax request again. You will be able to see your value of id.
Is the value correct? If yes... well boy, we have to keep digging together!
If no (it is "undefined" or "null"), then that's why the browser doesn't send it!
In this case, you have to check the value of $row['id_suciastka'], for exemple by using a var_dump($row); at the begining of your loop in index.php.
If nothing seems to work, then we have to get more informations on the problem!
Hope it helps! :)

Answer 2

I think your button is not in the DOM
You can try:
$(document).on('click', '.btn_delete', function() {})

Answer 3

$('.btn_delete').on('click', function(){
var id = $(this).data("id3");
if (confirm('Naozaj zmazat ?'))
{
$.ajax({
url: 'delete.php',
method: 'POST',
data: {delete:1, id:id},
success: function(data){
alert(data);
fetch_data();
}
});
}
});
Replace type with Method in ajax request.

Answer 4

For start, you can console.log id before you send a post request, so try
$('.btn_delete').on('click', function(){
var id = $(this).data("id3");
console.log(id); // <-- log ID here
if (confirm('Naozaj zmazat ?'))
{
$.ajax({
url: 'delete.php',
type: 'POST',
data: {delete:1, id:id},
success: function(data){
alert(data);
fetch_data();
}
});
}
});
If you get something there, then hit F12 in Chrome or Firefox and in dev tools, go to network tab and inspect http request to your PHP and in "headers" tab check "Form data" section of request (body of http request).
If you get ID and delete properties there, then your JS is correct and you should look for bug in PHP.
Best way to start on that would be to var_dump whole $_POST array. So:
var_dump($_POST);
if (isset($_POST['delete'])) {
include("db.php");
$id = mysqli_real_escape_string($conn, $_POST['id']);
$sql = "DELETE FROM suciastka WHERE id_suciastka = '".$id."'";
if (mysqli_query($conn, $sql))
{
echo "Deleted";
}
}