Im trying to delete a row without changing page - php

Question

<?php
while ($row = mysqli_fetch_array($query,MYSQLI_BOTH))
{
$id= $_POST['tran_no'];;
?>
<tbody>
<tr id=<?php echo $row['trans_no']?>>
<td><?php echo $row['trans_no']?></td>
<td><?php echo $row['obj_code']?></td>
<td><?php echo $row['div_no']?></td>
<td><?php echo $row['check_no']?></td>
<td><?php echo $row['payee']?></td>
<td><?php echo $row['payment']?></td>
<td><?php echo $row['add']?></td>
<td><?php echo $row['amount']?></td>
<td><?php echo $row['amountw']?></td>
<td>
<img src="image/remove.png">
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".delete").click(function(){
var element = $(this);
var del_id = element.attr("trans_no");
var info = 'trans_no=' + del_id;
if(confirm("Are you sure you want to delete this?"))
{
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function(){
}
});
$(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>
My problem is the ajax code doesnt seem to delete the row i dont know if the ajax code is executed or not. help would be much need, and please give me an insight as to what is the problem with my code or if i have to add something. heres the delete.php
<?php
$con = mysqli_connect("localhost","root"," ","dole") or die("Could not connect database");
if($_POST['trans_no'])
{
$id=$_POST['trans_no'];
$delete = "DELETE FROM table_no WHERE trans_no = '$id'";
$res=mysqli_query($con,$delete);
}
?>

Answer 1

OPTION 1:
You are assigning id from database to id attribute and in AJAX, reading trans_no.
trans_no attribute is not set for the delete link.
That is why you are not getting it.
Change your HTML to
<img src="image/remove.png">
To make it HTML5 Compliant:
<img src="image/remove.png">
And change JS:
var del_id = element.attr("data-id");
OPTION 2
Just change the line:
var del_id = element.attr("trans_no");
To
var del_id = element.attr("id");
And use your existing code.
It will work.

Answer 2

Try the below code,
$(".delete").click(function(){
var element = $(this);
var del_id = this.id;// use this.id as your database id related to element id
var info = {trans_no : del_id};
if(confirm("Are you sure you want to delete this?")){
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function(data){
if(data=='success'){
// hide only in case of successful deltion
element.parents(".show").animate({ backgroundColor: "#003" }, "slow")
.animate({ opacity: "hide" }, "slow");
} else {
alert('Error while deleting');
}
}
});
}
return false;
});
And in PHP return success or error like,
<?php
$con = mysqli_connect("localhost","root"," ","dole") or die("Could not connect database");
$status='error';
if(isset($_POST['trans_no']) && $_POST['trans_no']){
$id=$_POST['trans_no'];
$delete = "DELETE FROM table_no WHERE trans_no = '$id'";
$res=mysqli_query($con,$delete);
if($res){// only success in case of deleted.
$status='success';
}
}
echo $status;
?>

Answer 3

Try this:
$(function() {
$(".delete").click(function(){
var element = $(this);
var transNoVar = element.attr('id');
if(confirm("Are you sure you want to delete this?"))
{
$.ajax({
type: "POST",
url: "delete.php",
data: {
trans_no: transNoVar
},
success: function(data){
// delete.php return 1 on success 0 otherwise, check it here
if(data=='1') {
// on success hide the tr
// add class="show" to the tr
$(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
.animate({ opacity: "hide" }, "slow");
} else {
alert('Error deleting your record');
}
}
});
}
return false;
});
});