Cann’t delete row in php using AJAX

I am deleting row in PHP using AJAX, but it shows Row can’t delete. My Delete button is like this…

while ($row = mysqli_fetch_array($exec)) 
{
?>
    <tr>
        <td><?php echo $row["create_date"]; ?></td>
        <td><?php echo $row["bni_member_id"]; ?></td>
        <td><?php echo $row["bni_member_name"]; ?></td>
        <td><?php echo $row["bni_chapter_id"]; ?></td>
        <td><?php echo $row["bni_category_id"]; ?></td>
        <td><input type="button" name="delete" onclick="delFun()" value="delete" id="<?php echo $row["bni_member_id"]; ?>" class="btn btn-info btn-xs delete_data"/></td>
    </tr>
    <?php
}
?>

I call a function on the click button. Function like this. It always Executes part can’t delete. I think there is a problem with

data: {del_id: del_id},

I think there is a problem with Data… but I can’t resolve it.

   var delfin;

$(document).ready(function () {
    delFun = function () {
        $('.delete_data').click(function () {
            var del_id = $(this).attr("name");
            var $ele = $(this).parent().parent();
            $.ajax({
                url: "phpfile/delete.php",
                method: "POST",
                data: {del_id: del_id},
                success: function (data) {
                    if(data=="YES"){
                        $ele.fadeOut().remove();
                     }else{
                            alert("can't delete the row")
                     }
                }
            });
        });
    } 
}); 

And My PHP file is in another directory like this

<?php
    include('../../connection.php');
    $music_number = $_POST['del_id'];
    //echo $music_number;
    $qry = "DELETE FROM bni_member WHERE bni_member_id ='$music_number'";
    $result=mysql_query($qry);
    if(isset($result)) {
       echo "YES";
    } else {
       echo "NO";
    }
?>

My table is like

CREATE TABLE `bni_member` (
 `bni_member_id` int(11) NOT NULL AUTO_INCREMENT,
 `bni_member_name` text,
 `bni_member_mobile` varchar(13) DEFAULT NULL,
 `bni_member_email` text,
 `bni_member_website` text,
 `bni_member_bio` text,
 `bni_member_export_to` text,
 `bni_member_import_from` text,
 `bni_member_want_to_connect_to` text,
 `bni_member_company` text,
 `bni_chapter_id` int(11) DEFAULT NULL,
 `bni_category_id` int(11) DEFAULT NULL,
 `bni_member_address` text,
 `bni_member_commitee` text,
 `bni_member_profilepic` longblob NOT NULL,
 `bni_member_logo` longblob NOT NULL,
 `create_date` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
 `is_active` int(1) NOT NULL DEFAULT '1',
 `is_delete` int(1) NOT NULL DEFAULT '0',
 `last_update` text,
 `del_status` varchar(50) NOT NULL,
 PRIMARY KEY (`bni_member_id`),
 KEY `bni_chapter_id` (`bni_chapter_id`),
 KEY `bni_category_id` (`bni_category_id`),
 KEY `bni_member_id` (`bni_member_id`),
 CONSTRAINT `bni_member_ibfk_1` FOREIGN KEY (`bni_chapter_id`) REFERENCES 
`bni_chapter` (`bni_chapter_id`),
 CONSTRAINT `bni_member_ibfk_2` FOREIGN KEY (`bni_category_id`) 
REFERENCES `bni_category` (`bni_category_id`)
) ENGINE=InnoDB AUTO_INCREMENT=225 DEFAULT CHARSET=latin1

Answer

The first problem is that, you’re getting name attribute from your delete button. You can pass bni_member_id as a data attribute instead of using element id attribute. It can cause confusion.

And the second problem is that, you’re using both onlick attribute and jQuery’s click method. Using one them is pretty enough. Your input button will look like this:

<td><input type="button" name="delete" value="delete" class="btn btn-info btn-xs delete_data" data-bni-member-id="<?= $row["bni_member_id"]; ?>" /></td>

Then your js will look like this:

$(document).ready(function () {
    $('.delete_data').click(function () {
        var del_id = $(this).data("bni_member_id");
        var $ele = $(this).parent().parent();
        $.ajax({
            url: "phpfile/delete.php",
            method: "POST",
            data: {del_id: del_id},
            success: function (data) {
                if(data=="YES"){
                    $ele.fadeOut().remove();
                } else {
                    alert("can't delete the row")
                }
            }
        });
    });
});

I hope this helps you.