[Web-development (jquery)] Jquery/Ajax Delete Records show loading image

Jquery/Ajax Delete Records show loading image

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#load').hide();
});
$(function() {
$(".delete").click(function() {
$('#load').fadeIn();
var id = $(this).attr("id");
var string = 'id='+ id ;

$.ajax({
type: "POST",
url: "delete.php",
data: string,
cache: false,
success: function(){
$('#load').fadeOut();
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
return false;
});
});
</script>
<style>

#load {
position:absolute;
left:225px;
background-image:url(images/loading-bg.png);
background-position:center;
background-repeat:no-repeat;
width:159px;
color:#999;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
height:40px;
font-weight:300;
padding-top:14px;
top: 23px;
}
#hor-minimalist-a
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #fff;
margin: 45px;
width: 480px;
border-collapse: collapse;
text-align: left;
}
#hor-minimalist-a th
{
font-size: 14px;
font-weight: normal;
color: #039;
padding: 10px 8px;
border-bottom: 2px solid #6678b1;
}
#hor-minimalist-a td
{
color: #669;
padding: 9px 8px 0px 8px;
}
#hor-minimalist-a tbody tr:hover td
{
color: #009;
}
.delete {font-size:20px;font-weight:bold;}
</style>

<h3>Jquery/Ajax Delete Records</h3>
<div align="center"><img src="images/loading.gif" width="28" height="28" align="absmiddle"/> Loading...</div>

<table summary="Employee Pay Sheet">
<thead>
<tr>
 <th scope="col">Employee</th>
 <th scope="col">Salary</th>
 <th scope="col">Bonus</th>
 <th scope="col">Supervisor</th>
 <th scope="col">Delete</th>
 </tr>
</thead>
<tbody>
<tr>
 <td>Stephen C. Cox</td>
 <td>$300</td>
 <td>$50</td>
 <td>Bob</td>
 <td><a href="#">x</a></td>
</tr>
<tr>
 <td>Josephin Tan</td>
 <td>$150</td>
 <td>-</td>
 <td>Annie</td>
<td><a href="#">x</a></td>
 </tr>
</tbody>
</table>

delete.php

<?php

echo $_GET['id'];

?>

Download

Download Here

Posted by Unknown