Afin de rendre un peu plus sympa la suppression d’un enregistrement, j’ai décidé de vous montrez comment égayer un peu tout ça avec jQuery et un peu d’Ajax.

Premièrement, on va créer une base de données pour stocker nos messages





CREATE TABLE demo_supprimer_un_enregistrement_updates(
 msg_id INT PRIMARY KEY AUTO_INCREMENT,
 message TEXT);

Code jQuery :

Le code jQuery contient $(« .delete_button »).click(function(){}- qui est la fonction qui nous intéresse, on lui donne l’ID du message a supprimer.































<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(function() {
$(".delete_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent();

$.ajax({
type: "POST",
url: "deleteajax.php",
data: dataString,
cache: false,
beforeSend: function()
{
parent.animate({'backgroundColor':'#fb6c6c'},300).animate({ opacity: 0.35 }, "slow");;
},
success: function()
{
parent.slideUp('slow', function() {$(this).remove();});
}
});

return false;
});
});
</script>

deleteajax.php

deleteajax.php contient le code qui supprime le message de la base de données.












<?php
if($_POST['id'] 


){
 mysql_connect('localhost', 'user', 'password'); // remplacer ici par vos identifiants
 mysql_select_db('bdd'); // et le nom de la base de données
 $id=$_POST['id'] 




;
 $id = mysql_escape_String($id);
 $sql = "delete from demo_supprimer_un_enregistrement_updates where msg_id='$id'";
 mysql_query($sql);
}
?>

Code CSS :

Vous devez utiliser background-color pour que jquery.color.js s’y retrouve.
























*{margin:0;padding:0;}
ol.update
{
list-style:none;font-size:1.2em;
}
ol.update li
{
height:50px; border-bottom:#dedede dashed 1px;background-color:#ffffff
}
#main
{
width:500px; margin-top:20px; margin-left:100px;
font-family:"Trebuchet MS";
}
.delete_button
{
margin-left:10px;
font-weight:bold;
float:right;
}

Pour lister les messages stockés dans la base de données, téléchargez l’exemple, tout est dedans ;)