Jquery/Ajax Delete Records show loading image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jquery Ajax Mysql Delete Records show loading image</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="http://getbootstrap.com/dist/js/bootstrap.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(msg){
$('#load').fadeOut();
$("#status").html(msg);
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
return false;
});
});
</script>
<style>
#hor-minimalist-a
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #fff;
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;
}
#hor-minimalist-a tbody tr:hover td
{
color: #009;
}
#load {
color:#999;
font-size:18px;
font-weight:300;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<h3>Jquery/Ajax Delete Records Bootstrap for Datatable</h3>
<div id="load" align="left"><img src="img/loader.gif" width="28" height="28" align="absmiddle"/> Loading...</div>
<div id="status"></div>
<table id="hor-minimalist-a" summary="Employee Pay Sheet" class="table table-bordred table-striped">
<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">Action</th>
</tr>
</thead>
<tr class="record">
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
<td>
<p><button id="1" class="Edit btn btn-primary btn-xs"><span class="glyphicon glyphicon-pencil"></span></button>
<button id="1" class="delete btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></button></p>
</td>
</tr>
<tr class="record">
<td>Josephin Tan</td>
<td>$150</td>
<td>$400</td>
<td>Annie</td>
<td><p><button id="2" class="Edit btn btn-primary btn-xs"><span class="glyphicon glyphicon-pencil"></span></button>
<button id="2" class="delete btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></button></p>
</td>
</tr>
<tr class="record">
<td>Caite Ednalan</td>
<td>$450</td>
<td>$300</td>
<td>Batosai</td>
<td><p><button id="7" class="Edit btn btn-primary btn-xs"><span class="glyphicon glyphicon-pencil"></span></button>
<button id="7" class="delete btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></button></p>
</td>
</tr>
</table>
<div class="clearfix"></div>
<ul class="pagination pull-right">
<li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
//delete.php
<?php
$host = "localhost";
$username_ = "root";
$password = "";
$databasename = "testingdb";
$connect = mysql_connect($host, $username_, $password) or die("Opps some thing went wrong");
mysql_select_db($databasename, $connect) or die("Opps some thing went wrong");
$id_post = $_POST['id'];
$sql_user = mysql_query("SELECT * FROM users WHERE id='$id_post'") or die('Invalid query: ' . mysql_error());;
if(mysql_num_rows($sql_user))
{
$sql = "Delete from users WHERE id='$id_post'";
mysql_query( $sql);
echo "<div class='btn btn-danger' style='width:100%;'>Record succesfully deleted</div>";
}else{
echo "<div class='btn btn-primary' style='width:100%;'>No records found</div>";
}
?>
VIDEO
Jquery/Ajax Delete Records show loading image
