I am a newbie at at Ajax and to delete a list item asynchronously but its not working. Am getting the right xhr response but the item is not getting deleted. It’s very frustrating. Could anyone point out the error?
Here’s the html:
<ul id="subscribers">
<li>
<a href="delete.php?id=3">[x]</a>
<a href="user.php?id=3">Albertus Ackleton</a>
</li>
<li>
<a href="delete.php?id=6">[x]</a>
<a href="user.php?id=6">Bob Burry</a>
</li>
<li>
<a href="delete.php?id=2">[x]</a>
<a href="user.php?id=2">Cora Cuddlesby</a>
</li>
<li>
<a href="delete.php?id=5">[x]</a>
<a href="user.php?id=5">Derren Drufus</a>
</li>
</ul>
The Javascript:
<script type="text/javascript">
$(document).ready(subscribers_init);
function subscribers_init(){
$('#subscribers li a:first-child')
.click(delete_subscriber);
}
function delete_subscriber(){
var id=this.href.replace(/.*=/,'');
this.id='delete_link_'+id;
if(confirm('Are you sure you want to delete this subscriber?'))
$.getJSON('delete.php?id='+id, remove_row);
return false;
}
function remove_row(data){
if(!data.success)
return alert(data.error);
$('#delete_link_'+data.id)
.closest('li')
.slideUp('slow',function(){
$(this).remove();
});
}
</script>
And the PHP:
<?php
$id = (int)$_REQUEST['id'];
echo ( !($id%2) )? "{'id':$id,'success':1}" : "{'id':$id,'success':0,'error':'Could not delete subscriber'}";
As you can see, I am sending json back to the script.