article

Saturday, October 6, 2018

Jquery/Ajax Delete Records show loading image

Jquery/Ajax Delete Records show loading image






?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!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>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//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>";
 }
 
?>

Posted by ednalan at 9:19 AM . Under , .

Related Post