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
Genesis5150Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
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.
Julian HansenCommented:
There are several things that are wrong with this code.

1. You are using the mysql library - this has been deprecated and will no longer be supported in future versions - you need to consider moving to mysqli or PDO (in your case mysqli would be better)

2. As Alexandre said above you are referencing an id in the parent where it is not defined. However you are defining an id in your href for the <a> element so what you could do is change that to

3. The parent() is targeting the <td> - better to target the entire row <tr> for what you want to do so use $(this).closest('tr') to make sure you find the closest parent <tr>

<td align='center'><a href='{$row['id']}' class='delete'><img src='images/trash.png' border='0px'></a></td>

Open in new window

And then change your AJAX data attribute to (note use of $(this) to target clicked <a> rather than parent in your code.

data: 'ajax=1&delete=' + $(this).attr('href').replace('record-',''),

Open in new window


The next problem is your AJAX appears to be targeting the same page this script is in (I am assuming based on the PHP code contained in the script you posted that this is from the properties.php file? If not we would need to see that)

If it is the same then you are basically returning the entire page as part of the AJAX call - even though you don't use the returned data it is still not good programming to do it that way.

What you want to do is rather call a dedicated script - Something like this
<?php
$dbhost = 'localhost';
$dbuser = '###';
$dbpass = '###
$dbname = '###';

// Rather use MYSQLI
$mysqli = new mysqli($dbhost, $dbuser, $dbpass, $dbname);
 
if ($mysqli->connect_error) {
  die('Connect Error (' . $mysqli->connect_errno . ') '
      . $mysqli->connect_error);
}
$id = (int)$_GET['delete'];
$result = $mysqli->query("DELETE FROM units WHERE id={$id}");
  
if ( $mysqli->affected_rows > 0 )
{
  echo "Ok";
}
else {
  echo "Fail";
}

Open in new window


Then you might want to consider using css transitions to do your animation something like this
<style type="text/css">
tr.deleting {
	background-color: #fb6c6c;
	transition: background-color 300ms;
}
</style>

Open in new window

To use it in your AJAX
      
		beforeSend: function() {
				parent.addClass('deleting');
			},

Open in new window

You shouldn't really target <tr>'s for sliding etc as behaviour across browsers can be unpredictable
Attached is amended page and delete script. You will need to add header and footer includes and add style to appropriate place.
properties.php
deleteid.php

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Genesis5150Author Commented:
This worked like a charm. Thanks for the info and I will update to mysqli
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.