Animated Ajax Record Deletion Using jQuery PHP

No votes yet.
Please wait...

Hello Mates,

We have experienced that the demand of performing operations on the page without reloading it is considerably increasing day by day. Ajax is one such technique for getting records dynamically on the same page without refreshing the entire page. It allows us to update asynchronously by exchanging the data with the server behind the scenes.

We mean to say that it is possible to update parts of a web page without referring the entire page. In this article, we have explained about How to create Animated records deletion using Ajax with PHP.

Here is the database design for the records.

1
2
3
4
5
CREATE TABLE IF NOT EXISTS `tutorial` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`tutorial` varchar(250) NOT NULL,
`link` varchar(250) NOT NULL
)
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
Animated Ajax Record Deletion Using jQuery PHP
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
function deleteBox(id){
  if (confirm("Are you sure you want to delete this record?"))
  {
    var dataString = 'id='+ id;
    $("#flash_"+id).show();
    $("#flash_"+id).fadeIn(400).html('<img src="loading.png"/>');
    $.ajax({
           type: "POST",
           url: "delete.php",
           data: dataString,
           cache: false,
           success: function(result){
                if(result){
                    $("#flash_"+id).hide();
                         // if data delete successfully
                         if(result=='success'){
                         //Check random no, for animated type of effect
                         var randNum=Math.floor((Math.random()*100)+1);
                         if(randNum % 2==0){
                               // Delete with slide up effect
                               $("#list_"+id).slideUp(1000);
                         }else{
                               // Just hide data
                               $("#list_"+id).hide(500);
                         }
                    }else{
                         var errorMessage=result.substring(position+2);
                         alert(errorMessage);
                    }
                  }
            }
        });
     }
}
</script>

<!--?php $con = mysqli_connect('localhost','root','',’phphurdles’)or die("error with connection"); $sel = "SELECT * FROM tutorial"; $rs = mysqli_query($con,$sel); if(mysqli_num_rows($rs)&gt;0)&lt;br ?--> {
$i=0;
while($row=mysqli_fetch_array($rs))
{
echo '
<div id="list_'.$row['id'].'" class="list">';
echo '
<div class="name"><a href="'.$row['link'].'">'.$row['tutorial'].'</a></div>
';
echo '
<div id="flash_'.$row['id'].'" class="flash"></div>
';
echo '
<div class="delete"><a><img title="Delete" src="delete.jpg" alt="Delete" width="20" border="0" /></a></div>
';
echo '

</div>
';
$i++;

}
}
?&gt;

&nbsp;

 

For every record, we have added a click event that triggers the AJAX request. During the request, When the AJAX request returns a “success” response, we slide the records one step up without referencing the entire page with Animated effect.
For downloading working Demo: Download Here

You can also visit our other trending topics:

GENERATE QR CODE WITH PHP USING GOOGLE CHART API

HOW TO CREATE A SIMPLE CONTACT FORM IN THE WEBSITE AND APPLYING VALIDATION OVER IT USING JQUERY

.
Because Hurdles aren’t really Hurdles.

Attachments

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Solve : *
28 − 26 =