Success message displaying on the wrong page - php

Question

I am new to Ajax and I am trying CRUD operations using the same. I have an index.php page where I can insert and display data, also I have links to update and delete data over there.Create, Read, Update are working fine. Now the problem is that when I click the link to Delete, I am successfully sending the id to the delete_back.php and the value is getting deleted but the success message which should be printed on the index.php as I have a div named #delete_msg over there but somehow the success message is being printed on delete_back.php.
index.php
<div id="delete_msg"></div>
select_back.php
<?php
include("config.php");
$data=mysqli_query($con,"select * from student");
$col=mysqli_num_fields($data);
echo "<table>";
while($row=mysqli_fetch_array($data))
{
echo "<tr>";
for($i=0;$i<$col;$i++)
{
echo "<td>".$row[$i]."</td>";
}
echo "<td><a href='update_front.php?id=$row[0]&nm=$row[1]&add=$row[2]&cont=$row[3]'> Update </a></td>";
echo "<td><a class='delete' href='delete_back.php?id=$row[0]'>Delete</a></td>";
echo "</tr>";
}
echo "</table>";
?>
delete_back.php
<?php
$id=$_GET['id'];
include("config.php");
$data=mysqli_query($con,"delete from student where id='$id'");
if($data=="true")
{
echo "Data Deleted";
}
else
{
echo "Delete Error";
}
?>
ajax file
$(".delete").click(function(event){
event.preventDefault();
$.ajax({
url:"delete_back.php",
dataType:"html",
success:function(msgStr){
$("#delete_msg").html(msgStr);
}
})
})

Answer 1

add data-id attribute to anchor tag:
echo "<td><a id='delete' data-id='".$row[0]."' href='#'>Delete</a></td>";
You can do in your ajax be like:
$("#delete").click(function(event){
var obj = $(this); // first store $(this) in obj
var id = $(this).data('id'); // get id of data using this
$.ajax({
url:"delete_back.php",
dataType:"html",
data: { id: id },
type: "Post",
success:function(msgStr){
$("#delete_msg").html(msgStr);
}
})
})
in your php file:
$id=$_POST['id'];

Answer 2

First of all, I really hope you don't have a loop which prints multiple anchors with same ID...
That said, according to your html, your JS should be like the followin, otherwise you will lose your id value:
$("#delete").click(function(event){
event.preventDefault();
var my_href = $(this).attr('href');
$.ajax({
url: my_href,
dataType:"html",
success:function(msgStr){
$("#delete_msg").html(msgStr);
}
});
return false;
});
But this isn't a really nice coding style.. I would suggest to use html5 data- attribute to store your id value
echo "<td><a id='delete' data-id='".$row[0]."' href='#'>Delete</a></td>";
You can also use javascript:; instead of # if you don't want your url to change..
And your JS should be like:
$("#delete").click(function(event){
// you can avoid preventing default behaviour because your anchor doesn't have any href value
var del_id= $(this).data('id');
$.ajax({
url: "delete_back.php",
dataType:"html",
data: {id: del_id} // use object for better reading
success:function(msgStr){
$("#delete_msg").html(msgStr);
}
});
});
I also suggest you to check .done() construct LINK and deferred.done()

Answer 3

I believe that the delete link is coming from a loop containing other delete links too. If so, this is what you should do.
echo '<td><a class="lnk-delete" href="#" data-id="'.$row[0].'">Delete</a></td>'; //The delete links should have 1 class name
Then make your ajax call
$('.lnk-delete').click(function(e){
var id = $(this).data('id');
ajax({
url: 'delete_back.php'
data: {id: id},
type: 'POST',
success: function(data){
$('#delete_msg').html(data);
}
});
});
Get the id of the item you want to delete in php
$id = $_POST['id'];

Answer 4

<?php
//select_back.php
echo "<td><a id='delete' href='#'>Delete</a></td>";
?>
<input type="hidden" id="hidden_id" name="id" value="<?php echo $row[0]; ?>">
<script>
$("#delete").click(function(event){
event.preventDefault();
var hidden_id =$("#hidden_id").val();
$.ajax({
type:'GET',
url:"delete_back.php",
data:"id="+hidden_id,
success:function(data){
if(data.trim() == 'success')
{
$("#delete_msg").html("<div style='color:green;'>deleted successfully</div>");
}else{
//error
}
}
});
});
</script>
<?php
// delete_back.php
$id=$_GET['id'];
include("config.php");
$data=mysqli_query($con,"delete from student where id='$id'");
if($data)
{
echo "success";
}
else
{
echo "Delete Error";
}
?>