Как обновить записи в базе данных и удалить строку таблицы по нажатию кнопки, используя ajax?

Question

Итак, я создал таблицу HTML с динамическими строками. На конце каждого ряда есть кнопка. При нажатии этой кнопки в конкретной строке ее необходимо удалить без обновления страницы.

Так что я пытаюсь сделать это, изменяя значения столбца в базе данных по нажатию кнопки. В моей базе данных есть поле с именем «status», которое изначально установлено как «unchecked». Но когда я нажимаю кнопку, запрос на обновление должен быть запущен, следовательно, изменяя поле «status» на «флажок» в этой конкретной строке и удаляя эту конкретную.

newCust.php

<table class="table table-bordered table-striped table-light table- 
responsive text-nowrap">
<thead class="thead-dark">
<tr>
<th class="col"><label> nID</label></th>
<th class="col"><label> CUSTOMER NAME </label></th>
<th class="col"><label> ADDRESS </label></th>
<th class="col"><label> CITY </label></th>
<th class="col"><label> STATUS </label></th>
</tr>
</thead>
<tbody>

<?php
<!-- GETTING DATA FROM THE TABLE WHERE STATUS FIELD IS UNCHECKED -->
$query = "select * from mx_newcustomer where status = 'unchecked'";
$result = mysqli_query($db,$query);
while($res = mysqli_fetch_array($result)){
$nID = $res['nID'];
?>
<tr>
<td><?php echo $nID;  ?></td>
<td><?php echo $res['customername'];  ?></td>
<td><?php echo $res['address'];  ?></td>
<td><?php echo $res['city'];  ?></td>
<td><button type="button" id="button<?php echo $nID;  ?>" class="btn btn- 
dark" >Ok</button></td>
</tr>

<script>
<!-- AJAX TO UPDATE RECORDS IN THE DATABASE-->
$(document).ready(function () {
$("#button<?php echo $nID ?>").click(function(){
alert('Test');
jQuery.ajax({
type: "POST",
url: "updateCust.php",

<--TRYING TO 
PASS THE CLICKED BUTTON ID. I BELIEVE THIS IS WHAT I'M DOING WRONG-->
data:  {"nID":$('#button<?php echo $nID ?>').serialize()}, 
success: function(response)
{
 alert("Record successfully updated");
}
});
});
});

</script>

updateCust.php

$db = mysqli_connect("credentials");
$nID = $_POST['nID'];
$query = "UPDATE mx_newcustomer SET status = 'checked' WHERE nID = 
'$nID'";
$res = mysqli_query($db, $query);

error_reporting(E_ALL);
ini_set('display_errors','On');

Я не получаю никаких ошибок, но запрос на обновление тоже не запускается. Ожидаемый результат - удалить строку таблицы, кнопка которой была нажата, без обновления страницы.

Answer 1

Не используйте .serialize(), возвращается строка в форме name=value.Но у вашей кнопки нет имени или значения, поэтому сериализировать нечего.

Измените ее на:

data:  {"nID": <?php echo $nID ?>}, 

Чтобы удалить строку, вы можете использовать:

success: function() {
    $("#button<?php echo $nID?>").closest("tr").remove();
}