By: Prem Tiwari | Last Updated: | In: Javascript & Ajax, Mysql, PHP Tutorial
In this tutorials i will explain the easy steps to Delete a Record with animation effect using jQuery and Ajax. I like Twitter API very much, it’s clean and faster. So i prepared this jQuery tutorial delete action with out refreshing page.
After this tutorials you will be able to create a web application which will delete records from mysql table like animation using jQuery and PHP, so keep close attention in this post and you can also download the complete script of this tutorial.
Open PHPMyAdmin in your browser and select a database. Click on SQL tabs, Copy paste below snippet and execute the code. Now you have successfully created the mysql table named “updates” and inserted some dummy data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | -- -- Table structure for table `updates` -- CREATE TABLE IF NOT EXISTS `updates` ( `ms_id` int(11) NOT NULL AUTO_INCREMENT, `message` text, PRIMARY KEY (`ms_id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ; -- -- Dumping data for table `updates` -- INSERT INTO `updates` (`ms_id`, `message`) VALUES (2, 'Delete a Record with animation effect using jQuery and Ajax'), (3, 'Twitter Like Parsing URLs with JavaScript'), (4, 'Delete a Record with animation effect using jQuery and Ajax'); |
Now create a folder in your www folder. Create dbconfig.php file and add below code to connect your code with mysql database.
1 2 3 4 5 6 7 8 9 10 | <?php $mysql_hostname = "localhost"; $mysql_user = "root"; $mysql_password = ""; $mysql_database = "post"; $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database"); mysql_select_db($mysql_database, $bd) or die("Could not select database"); ?> |
Here Displaying records form database using while loop. Delete button included in anchor tag attribute id=< ?php echo $row['ms_id']; ?>. This we are passing to delete.php page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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> |
1 2 3 4 5 6 7 8 9 10 | <?php include("dbconfig.php"); if($_POST['id']) { $id=$_POST['id']; $sql = "delete from {$prefix}updates where ms_id='$id'"; mysql_query( $sql); } ?> |
Ajax with Jquery code
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 | <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> |
.Do like & share it with your friends on social media. Don’t forget to follow us on Facebook and Twitter to learn cool tutorials.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
delete record using jquery, hot to delete record using jquery, Jquery, PHP
