Raj Sonakar Raj Sonakar - 4 months ago 8
PHP Question

I want to delete a row with fadeout effect is not working

I Have a table showing data i want to delete a row when a delete button click
i have a bootstrap class to design the table please help and suggest a way to do it

<code><?php
while ($query = $qry->fetch_object()) {
?>
<tr><td><?php echo $query->Sumthing; ?></td>
<td><?php echo $query->Sumthing; ?></td>
<td><?php echo $query->Sumthing; ?></td>
<td><?php echo $query->Sumthing; ?></td>
<td><?php echo $query->Sumthing; ?></td>
<td><?php echo $query->Sumthing; ?></td>
<td><?php echo echo $query->Sumthing; ?></td>
<td> <button type="button" class="btn btn-sm btn-danger" 0nClick="deleteReminder(<?php print($query->id);?>)" >
</td>
</tr>
<script>
function deleteReminder(remId) {
if (confirm("Are you sure?")) {

$.ajax({
type: "POST",
url: "sumthing.php",
data: "remId="+remId,
success: function(result){
console.log(result);
}
});

$(this).animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")

}
return false;
}
</script>
</code>

Answer

This line is wrong

<td> <button type="button" class="btn btn-sm btn-danger" 0nClick="deleteReminder(<?php  print($query->id);?>)" >

You have spelled onClick with a 0. Change it to:

<td> <button type="button" class="btn btn-sm btn-danger" onClick="deleteReminder(<?php  print($query->id);?>)" >

You also need to place an ID on your table row, that you can then pass to the function so it will delete the correct row. You also can't animate background-color. See below:

     <?php
        $i = 0;
        while ($query = $qry->fetch_object())  {
            $i = $i + 1;
                     ?>     
                    <tr id="rowNum<?php echo $i; ?>"><td><?php echo $query->Sumthing; ?></td>
                        <td><?php echo $query->Sumthing; ?></td>
                        <td><?php echo $query->Sumthing; ?></td>
                        <td><?php echo $query->Sumthing; ?></td>
                        <td><?php echo $query->Sumthing; ?></td>
                        <td><?php echo  $query->Sumthing; ?></td>
                        <td><?php echo echo $query->Sumthing; ?></td>
                        <td> <button type="button"    class="btn btn-sm btn-danger" onClick="deleteReminder('rowNum<?php echo $i; ?>')" >
</td>
</tr>
<script>
        function deleteReminder(remId) {
            if (confirm("Are you sure?")) {  
                $.ajax({
                    type: "POST",
                    url: "sumthing.php",
                    data: "remId="+remId,
                    success: function(result){
                        console.log(result);
                    }
                });
           remId = "#"+remId;
           $(remId).animate({
               opacity: 0
            }, 1000,function(){});
        }
        </script>

Here's a working jsFiddle.

Comments