asked on

Animated AJAX Record Deletion Using jQuery

I have a table where it lists the user's properties but I would like to implement an animated ajax record deletion using Jquery. I've included the complete code below but it doesn't seem to delete. Could someone please show me what I'm doing wrong?

<?php include_once('header.php'); ?>
<script type='text/javascript'>
        $(document).ready(function() {
	$('a.delete').click(function(e) {
		e.preventDefault();
		var parent = $(this).parent();
		$.ajax({
			type: 'get',
			url: 'properties.php',
			data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
			beforeSend: function() {
				parent.animate({'backgroundColor':'#fb6c6c'},300);
			},
			success: function() {
				parent.slideUp(300,function() {
					parent.remove();
				});
			}
		});
	});
});  
</script>
 <?php
	$dbhost = 'localhost';
	$dbuser = '####';
	$dbpass = '####';
	$dbname = '####';
    $con = mysql_connect($dbhost,$dbuser,$dbpass);
	if (!$con)
 	{
 	 die('Could not connect: ' . mysql_error());
 	 }

	mysql_select_db($dbname, $con);

	$result = mysql_query("SELECT * FROM units WHERE `username` = '".$_SESSION['jigowatt']['username']."'");
	
	if ( mysql_num_rows($result) > 0 )
	
	{echo "<br>";
?>
<a class="btn btn-default" href="home.php" role="button">Add A Listing</a>
<a class="btn btn-default" href="#" role="button">Properties</a>
<?php

if(isset($_GET['delete'])) {
	$result = mysql_query('DELETE FROM units WHERE id = '.(int)$_GET['delete'],$link);}
	
	echo "<table class='table' > 
<tr>
<th></th>
<th></th>
<th style='color: rgba(0,0,0)'> <h3 class='btn btn-primary'>Title</h3> </th>
<th style='color: rgba(0,0,0)'> <h3 class='btn btn-primary'>Unit</h3> </th>
<th style='color: rgba(0,0,0)'> <h3 class='btn btn-primary'>Town</h3> </th>
<th style='color: rgba(0,0,0)'> <h3 class='btn btn-primary'>Created</h3> </th>
<th style='color: rgba(0,0,0)'> <h3 class='btn btn-primary'>Views</h3> </th>
</tr>";
		$rowcountnum = 0;
		while($row = mysql_fetch_array($result))
				  {
$rowcountnum++;

			$img01 = trim($row['image01']);
			$image01 =  !empty($img01) ? "<a href='redirectpreview.php?id=".$row['id']."' style='color: #000';><img src='".$row['image01']."' width='50'></a>"  : "<a href='redirectpreview.php?id=".$row['id']."' style='color: #000';><img src=\"images/no-image.png\" width='50'></a>";

$originalDate = $row['date_created'];
$new_date = date('n/j/Y',strtotime($originalDate));

echo "<tr class='record'>
		<td align='center'><a href='?delete=".$row['id']."' class='delete'><img src='images/trash.png' border='0px'></a></td>
		<td align='center'><a href='redirectedit.php?id=".$row['id']."'><img src='images/edit.png' border='0px'></a></td>
		<td align='center'>
		   <a href='redirectpreview.php?id=".$row['id']."' style='color: #000'>" . $row['title'] . "</a><br>$image01</td> 
		<td align='center'>" . $row['unit'] . "</td>
		<td align='center'>" . $row['town'] . "</td>
		<td align='center'>" . $new_date ."</td>
		<td align='center'>" . $row['views'] . "</td>
</tr>"; 
}
echo "</table> <br>";
  
} 						else{ echo '<h3 style="color:#0000FF">Nothing Here</h3>';}
		
				
	
	
					
														
	?>
<?php include_once('footer.php'); ?>

Open in new window

Thanks in advance

Alexandre Simões

I think the problem is that you're not getting the id needed for the delete operation.

var parent = $(this).parent();
gives you the <td> element that contains the link you click.
This <td> doesn't have any id attribute which you're trying to get here:
data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),

Simply adding this id info to the td should solve your problem.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Genesis5150

ASKER

This worked like a charm. Thanks for the info and I will update to mysqli

Julian Hansen

You are welcome.