Delete Record Using JQuery and PHP with Animation

March 23rd, 2009 View Comments

Hello Friends !!

Today I will Give you code to delete records using JQuery and PHP with Animation effect.

It is very simple to understand. First you have to download jquery.js which is availble HERE.

After that copy this code in your PHP file and run it.

<?php
$mysql_hostname = “localhost”;
$mysql_user = “root”;
$mysql_password = “”;
$mysql_database = “test”;

$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die(“Could not connect database”);
mysql_select_db($mysql_database, $bd) or die(“Could not select database”);

if(isset($_GET['delete']))
{

$query1 = ‘DELETE FROM test WHERE id = ‘.(int)$_GET['delete'];
$result = mysql_query($query1,$bd);
}
?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<script language=”javascript” type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘a.delete’).click(function(e) {
e.preventDefault();

var parent = $(this).parent();

$.ajax(
{
type: ‘get’,
url: ‘list.php’,
data: ‘ajax=1&delete=’ + parent.attr(‘id’).replace(‘record-’,”),

beforeSend: function()
{
$(this).parents(“id”).animate({backgroundColor: “#fbc7c7″ }, “fast”).animate({ opacity: “hide” }, “slow”);
},
success: function()
{
parent.slideUp(300,function() {
parent.remove();
});
}
});
});
});
</script>
</head>

<body>
<form id=”frm_change_password” name=”frm_change_password” method=”post” action=”">
<input type=”hidden” name=”action” id=”action” value=”" />
<?php
$query = ‘SELECT * FROM test ORDER BY name ASC’;
$result = mysql_query($query,$bd);
while($row = mysql_fetch_assoc($result))

{
echo ‘<div class=”record” id=”record-’,$row['id'],’”>
<a href=”?delete=%27,$row%5B%27id%27%5D,%27″ class=”delete”>Delete</a>
<strong>’,$row['name'],’</strong>

</div>’;
}
?>

</form>
</body>
</html>

Enjoy the jQuery effect.

If you like this post then comment on this.If you have any query related to PHP then you can also tell me.

I will try my best to solve your problem.

Thanks…..