Удалить запись из базы данных с помощью ajax и jQuery

Question

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

Все работает отлично, за исключением того, что я хотел добавить кнопку на каждом < tr>, что при щелчке удаляет соответствующую запись в базе данных, однако я не могу это сделать. Я получил документацию обо всем, что я использовал, и просто не вижу проблемы. Вот мой код:

HTML:

<div class="row"> 
    <div class="col-lg-12" id="table_container"> 
     <table class="table table-striped" id="result_table"> 

     </table> 
    </div> 
</div> 

Таблица создается на отдельном PHP файл, который называется по AJAX, это соответствующий цикл:

while ($places = mysqli_fetch_array($result)) { 
    echo "<tr>"; 
    echo "<td>". $places ['ID']."</td>"; 
    echo "<td>". $places ['NAME']."</td>"; 
    echo "<td>". $places ['CHAIRS']."</td>"; 
    echo "<td>". $places ['CREATED']."</td>"; 
    echo '<td> 
       <button class="btn btn-default deleteWaitlist" type="submit" name="' . $places['ID'] . '">X</button> 
      </td>'; 
    echo "</tr>"; 
} 

Все кнопки создаются с правильное «имя» в последнем html (это номер auto_increment).

JQuery:

$(".deleteWaitlist").click(function(){ 
     console.log("click on .deleteWaitlist"); 
     // Get the varible name, to send to your php 
     var i = $(this).attr('name'); 
      $.post({ 
       url: 'deleteWaitlist.php', 
       data: { id : i}, 
       success: function(result){ 
        console.log("success" + result); 
       } 
      }); 
    }); 

Как я уже сказал, своего рода новый Аяксу. исправьте меня, если я ошибаюсь: это вызывает deleteWaitlist.php и отправляет параметр 'id' со значением '$ (this) .attr (' name ')', который является значением auto_increment в базе данных и должен быть разным для каждой записи ,

deleteWaitlist.php

$sql = "DELETE FROM waitlist WHERE id=" . $_POST[id] . ""; 
mysqli_query($c,$sql); 

Это довольно просто, не так ли? Можете ли вы помочь мне найти ошибку? Может быть, что-то вроде (int) $ _ POST [id] где-то? Я мог бы поклясться, что пробовал это везде.

EDIT: Как ни странно, я даже не получаю журнал консоли «на .deleteWaitlist», когда я нажимаю кнопку, как будто я даже не щелкнул по ней. Что может случиться? Я также изменил идентификатор «deleteWaitlist» для класса, так как это, кажется, лучшая практика.

Answer 1

Кажется, в вашем выходном html есть несколько кнопок удаления, а jQuery соответствует только одному элементу при запросе идентификатора.

Попробуйте использовать CLASS вместо ID на кнопке удаления.

while ($places = mysqli_fetch_array($result)) { 
    echo "<tr>"; 
    echo "<td>". $places ['ID']."</td>"; 
    echo "<td>". $places ['NAME']."</td>"; 
    echo "<td>". $places ['CHAIRS']."</td>"; 
    echo "<td>". $places ['CREATED']."</td>"; 
    echo '<td> 
     <button class="btn btn-default deleteWaitlist" type="submit" name="' . $places['ID'] . '">X</button> 
    </td>'; 
    echo "</tr>"; 
} 

JQuery:

$(".deleteWaitlist").click(function(){ 
    console.log("click on .deleteWaitlist"); 
    // Get the varible name, to send to your php 
    var i = $(this).attr('name'); 
     $.post({ 
      url: 'deleteWaitlist.php', 
      data: { id : i}, 
      success: function(result){ 
       console.log("success" + result); 
      } 
     }); 
});