Delete Data with AJAX and JQuery without Refresh Page

When has the data that should be removed from the website, usually refresh the pageor call another page and then redirect to a page early. Below I will explain how toremove data without refresh the page and have a bit animated when data is erased.

Simplycdesign Demodelete

That need to be prepared is jquery, ajax, and php page to delete data from the database. Obviously I have a index.php file whose contents:

<?php
mysql_connect("localhost","root","") or die ("gagal");
mysql_select_db("demodelete");
$nama=mysql_query("select * from contoh");
?>
<style>
.sembunyikan{
padding:5px;
text-decoration:none;
background:#ccc;
border-radius:4px;
-moz-border-radius:4px;
color:#000;
font:11px bolder Verdana, Geneva, sans-serif;
margin-left:20px;
display:none;
}
#nama{
margin:10px;
background:#333;
width:100%;
padding:5px;
color:#fff;
border-radius:4px;
-moz-border-radius:4px;
}
#nama:hover .sembunyikan{
display:inline;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
var xmlhttp = false;

try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}



function hapus(key){

var url='hapus.php?id='+key;

xmlhttp.open("GET", url);


xmlhttp.send(null);
}


$(document).ready(function()
{

$(".sembunyikan").click(function(){
$(this).parent("#nama").fadeOut(500);
});
});
</script>
<div style="margin-left:40%;">
<a href="http://wimplycdesign.blogspot.com" class="sembunyikan" style="position:inherit;display:inline;">Simplycdesign Demo Delete JQUERY & AJAX</a>
<?php
while($nama2=mysql_fetch_array($nama)){
echo "<div id=\"nama\">$nama2[nama] <a href=\"#\" class=\"sembunyikan\" onclick=\"hapus($nama2[id])\">delete</a></div>";
}
?>
</div>

Then in the file hapus.php:

<?php
mysql_connect("localhost","root","") or die ("gagal");
mysql_select_db("demodelete");

mysql_query("DELETE FROM contoh WHERE id='$_GET[id]'");
?>

In the index file that is contained jquery

$(".sembunyikan").click(function(){
$(this).parent("#nama").fadeOut(500);
});

means that if the class is clicked hide the id name will dihide. here I use the "parent"because for id in the class itself that hide, if no parent, then all id name will hide.
jquery script on the index file serves to hide the files to be deleted, and the script xml /AJAX own function to delete data from the database. both must be installed. becausewithout AJAX, the page refresh when the data will reappear, otherwise if you do notuse JQuery, so when data is deleted, then the data is still visible when in fact the datais gone.
I hope my explanation is clear enough, hahaha: D.
Immediately wrote the script download it here:

Downlaod