Delete Button in PHP generated table, deleting from database and page

Question

I'm trying to get the delete button on this generated table to work (deleting the database record and deleting the row from the view). The button is being generated through the echo statement in the for loop.

PHP code spitting out the view:

<?php
      //Waitlist for Nobel Floorplans
                $sth = $db->prepare("SELECT id, first_name, last_name FROM wlist");
                $sth->execute();

                $results = $sth->fetchAll();

                $wishlistArray[] = null;
                foreach ($results as $result) {
                     echo "<tr><td>".$result['first_name']."</td><td>".$result['last_name']."</td><td><button class=\"delete_class\" id=\"".$result['id']."\" >DELETE</button></td></tr>";
                }

?>

The bottom of this PHP page, is this javascript f(x):

<script>
    $(".delete_class").click(function(){
        var del_id = $(this).attr('id');
        $.ajax({
            type:'POST',
            url:'delete_page.php',
            data: {delete_id : del_id},
            success: function (data) {
                if (data) { 
                    tx.executeSql('DELETE FROM wlist WHERE id = ?', [delete_id], success, error);
                }
                else { // DO SOMETHING
                }
            }
            });
    });
</script>

The problem with the above code, is that the URL 'delete_page.php" isn't being referred to, and nothing's being deleted from the database.. that, and the "success: function(data) isn't being called at all..

I have the "delete_page.php" in the same folder as the PHP file containing all the above code. This file has this code:

<?php
    $id = $_POST['delete_id'];
    $query = "delete from nobel_waitlist where ID = $id";
?>

It would also be great to know how to AJAX delete that row in that view as well as deleting the database record..

Answer 1

An Alternative Way. I don't know about executeSql function, that's why i've given a simple alert box.

<script>
$('.delete_class').click(function(){
    var del_id= $('.delete_class').val();
    $.ajax({url:"delete_page.php?delete_id="+del_id,cache:false,success:function(result){
        alert("Data Deleted");
    }});
});
</script>

delete_page.php

<?php
$id = $_GET['delete_id'];
$query = "DELETE FROM nobel_waitlist WHERE ID=:id";
$queryResult = $db->prepare($query);
$queryResult->execute(array(':id' => $id));
?>