ajax

Delete Records With animation fade-out effect Using jQuery And PHP
Delete Records With Effect Using jQuery And PHP

Overview

this is a fast way to delete Records from your mysql datebase without loading the page .
this jquery code can Delete a any number of Records with animation fade-out effect using jQuery and Ajax.


How It work?

take a look at Jooria_Delete_0.2.js

(function($) {
    $.fn.Jooria_Delete = function(name,message) {
            $(this).click(function() {         
            var id = $(this).attr("id");
            var dataString =  name +'='+ id ;
            var parent = $(this).parent();
            
            if(confirm(message)) {
                $.ajax({
                    type: 'POST',
                    data: dataString,                 
                    success: function() {
                        parent.fadeOut('slow', function() {$(this).remove();});
                    }
                });
            }
            return false;
        });
    };
})(jQuery);

name is the name of the variable that will send to PHP by jQuery Ajax. message is the confirmation messages that will appear when click delete.

usage

how you can use the jQuery script to delete any thing

jQuery

$(function() {
    $('.delete').Jooria_Delete('user_id','Sure you want to delete this user!o');
});
we said 'user_id' is the variable that will send server

html

now you shold the delete word in the same tag that contain the user name. why? to delete the user name + delete word row you sould add it like that

<span><a>user name here</a> [<a id='5' class='delete' href='#'>Delete</a>]</span>

Requirements

jQuery

full exapmle

i made for you full example to explan how it work just download then try it by your localhost

Contents

  • index.php
  • db.php(Database configuration)
  • jquery.js

db.php

<?php

mysql_select_db('users',mysql_connect('localhost','root',''));

?>

Database Table Code

--
-- Table structure for table `users`
--

CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(10) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`id`, `name`) VALUES
(1, 'jooria'),
(2, 'Go'),
(3, 'Profeser');

index.php

<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="Jooria_Delete_0.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.delete').Jooria_Delete('id','Sure you want to delete this one?');
});
</script>

</head>
<?php
include ('db.php');

if(isset($_POST['id'])){
mysql_query("delete from users where id='".intval($_POST['id'])."'");
exit;
}

$sql = mysql_query("select * from users order by id asc");

echo "<ul>";

while($Row = mysql_fetch_array($sql)){
extract($Row);   
echo "<li>$name [<a id='$id' style='color:#ff0000;' class='delete' href='#'>Delete</a>]</li>n";   
}

echo "</ul>";

?>
in: » Website Programming » ajax | Posted on Sep 22nd, 2009 | views 16,057
About the author
i'm moustafa from egypt i love doing one thing 'web programming & designing', This year I've got 19 years old and i'm in the english College of management (in Business Administration part soon)