• Delete a Record with fade-out effect using jQuery and Ajax

    This blog about how to delete a record with animation fade-out effect using Ajax and jQuery. So i prepared this jQuery tutorial delete action with out refreshing page.

    Database Table Code :

    View Code MYSQL
    1
    2
    3
    
    CREATE TABLE updates(
    ms_id INT PRIMARY KEY AUTO_INCREMENT,
    message TEXT);

    Step 1. index.php(user interface page):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    
    Here Displaying records form database using while loop. Delete button included in <a> anchor tag attribute id=<?php echo $row['ms_id']; ?>. This we are passing to delete.php page.
    <body> 
    <form action="" method="post">
    <span class="what">What are you doing?</span>
    <textarea  =""  cols="55" id="update" maxlength="145" name="update" rows="3"></textarea>
    <input type="submit" value=" Update "  class="update_button" />
    </form>
    <?php
    include("dbconfig.php");
    $sql="select * from updates order by ms_id desc"; 
    $result = mysql_query($sql); 
    while($row=mysql_fetch_array($result)) 
    { 
    $message=stripslashes($row["message"]); 
    ?>
    <tr><td><?php echo $message; ?></td><td><a href="#" id="<?php echo $row["ms_id"]; ?>" class="delbutton"><img src="trash.png" alt="delete"/></a> </td></tr>
    <?php
    }
    ?>
    </body>

    Step 2. delete.php:
    Simple php script delete data from Updates table.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    <?php
    include("dbconfig.php");
    if($_POST['id'])
    {
       $id=$_POST['id'];
       $sql = "delete from {$prefix}updates where ms_id='$id'";
       mysql_query( $sql);
    }
    ?>

    Step 3 Ajax and jQuery Code:
    Included jQuery plugin in head tag and ajax code included in this jquery function $(“.delbutton”).click(function(){}- delbutton is the class name of anchor tag. Using element.attr(“id”) calling delete button value.

    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
    
    <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" 
    $(function() {
     
    $(".delbutton").click(function(){
    var del_id = element.attr("id");
    var info = 'id=' + del_id;
    if(confirm("Sure you want to delete this update? There is NO undo!"))
    {
    $.ajax({
    type: "POST",
    url: "delete.php",
    data: info,
    success: function(){
    }
    });
    $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
    .animate({ opacity: "hide" }, "slow");
    }
    return false;
    });
    });
    </script>
    </head>

    Step 4.dbconfig.php:
    You have to change the database configuration like database name, username and password.

    1
    2
    3
    4
    
    $mysql_hostname = "localhost";
    $mysql_user = "User Name";
    $mysql_password = "Password";
    $mysql_database = "Database Name";
    Tags:

Comments on this post

Leave a Reply

  • Security Code :


    + 3 = five