Supprimer un message avec PHP et jQuery sans recharger la page

L’article suivant vient à la suite de celui que j’ai publié sur la façon d’ajouter des messages sans rechargement de page, le principe est le même mais cette fois il s’agit de supprimer des messages sans passer par la case rechargement.

Vous pouvez consulter la démonstration ici : Démo

La structure du script sera composée par les fichiers suivants :

index.php : Affichage du formulaire pour ajouter les messages
new_data.php : Le fichier qui sera chargé d’ajouter les messages dans la base de données
remove_data.php : le fichier qui supprimera les messages
style.css : Style de la page

index.php

<html>
<head>
	<meta charset="UTF-8">
	<title>Messages</title>
	<link rel="stylesheet" href="style.css">

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
	<script type="text/javascript" >
	$(function() {
		//supprimer les messages
		$(".remove").click(function(){
			var element = $(this);
			var I = element.attr("id");
			var info = 'id=' + I;
			$("#load").html('<img src="loader.gif" >');

			$.ajax({
				type: "POST",
				url: "remove.php",
				data: info,
				success: function(){
					$("#load").ajaxComplete(function(){}).slideUp();
					$('#remove'+I).fadeOut(200).hide();
				}
			});
			return false;
		});

		//ajouter les messages
		$(".btn-submit").click(function() {

			var newMessage = $("#message").val();
			var dataMessage = 'message='+ newMessage;

			if(newMessage=='')
			{
				alert("Veuillez saisir votre message");
			}
			else
			{
				$("#load").show();
				$("#load").fadeIn(500).html('<img src="loader.gif" align="absmiddle"> <span class="loading">Chargement des messages...</span>');

				$.ajax({
					type: "POST",
					url: "new_data.php",
					data: dataMessage,
					cache: false,
					success: function(html){
						$("ul#update").prepend(html);
						$("ul#update li:first").slideDown("slow");
						document.getElementById('message').value='';
						document.getElementById('message').focus();
						$("#load").hide();

						//supprimer les messages ajoutés en mode AJAX
						$(".remove").click(function(){
							var element = $(this);
							var I = element.attr("id");
							var info = 'id=' + I;
							$("#load").html('<img src="loader.gif" >');

							$.ajax({
								type: "POST",
								url: "remove.php",
								data: info,
								success: function(){
									$("#load").ajaxComplete(function(){}).slideUp();
									$('#remove'+I).fadeOut(200).hide();
									//$("#load").hide();
								}
							});
							return false;
						});
					}
				});
			} 
			return false;
		});
	});
	</script>
</head>
<body>

	<div id="wrapAll">

		<div>
				<h2>Votre message :</h2>
				<div><textarea name="message" id="message" class="textarea-zone" maxlength="255" placeholder="Exprimez-vous" ></textarea></div>
				<div><input type="submit" value="Ajouter un commentaire" name="submit" class="btn-submit"/></div>
		</div>

		<h2>Liste des messages :</h2>
		<div id="load"></div>

		<ul id="update" class="journal">
			<?php
				$req = "SELECT msg, mes_id FROM tutos_message order by time desc, mes_id desc";
				//echo $req;
				$res = mysql_query($req);
				while ($r 		= mysql_fetch_assoc($res)) {

					$msg 		= $r['msg'];
					$msg_id 	= $r['mes_id'];	
					echo '<li id="remove'. $msg_id .'" class="">
						<div class="msg">'. $msg .'</div>
						<div class="span"><a href="#" class="remove" id="'. $msg_id .'">X</a></div>
						<div class="clr"></div>
					</li>';
				}

			?>
		</ul>

	</div>

</body>
</html>

new_data.php

<?php
include('config.php');
if(isset($_POST['message']))
{
	$message 	= strip_tags($_POST['message']);
	$req 		= "INSERT INTO tutos_message (msg, time) values ('$message', '". date('YmdHis') ."')";
	mysql_query($req);

	$sql_in 	= mysql_query("SELECT msg, mes_id FROM tutos_message order by time desc");
	$r 			= mysql_fetch_assoc($sql_in);
	$msg 		= $r['msg'];
	$msg_id 	= $r['mes_id'];

	echo '<li id="remove'. $msg_id .'">
				<div class="msg">'. $msg .'</div>
				<div class="span"><a href="#" class="remove" id="'. $msg_id .'">X</a></div>
				<div class="clr"></div>
			</li>';
}

?>

remove_data.php

<?php
include('config.php');
if(isset($_POST['id']))
{
    $id     = strip_tags($_POST['id']);
    $req     = "DELETE FROM tutos_message WHERE mes_id = '$id' ";
    mysql_query($req);
}

?>

style.css

#wrapAll { width: 800px; margin:0px auto; border: 0px solid #e1e1e1; padding: 10px; }

.textarea-zone { border: 1px solid #e1e1e1; width: 600px; height: 50px;}
.btn-submit { border-radius: 3px; margin: 5px 0; background-color: rgb(1, 117, 174); color: #ffffff; border: 0; padding: 5px; cursor: pointer; }
h2 { font-size: 1.1em; color: rgb(1, 117, 174); text-transform: uppercase;}

ul.journal {
	list-style:none;
	font-size:1.1em;
	margin-left: -40px;
	width: 600px;
	margin-bottom: 15px;
}

ul.journal li { 

	position:relative;
	padding:5px;
	border-bottom:1px solid #e1e1e1;
	line-height:1em; 
	background-color:#fff;
	line-height: 25px;
	min-height:30px;
	color: #000000;
	margin-bottom: 5px;
	clear: both;
}

ul.journal li:first-child{	border-bottom:1px solid #e1e1e1; padding: 0px; padding: 5px;}

ul.journal li .msg { float: left; width: 560px;  }
ul.journal li .span { float: right; width: 15px; }
ul.journal li .span a { color: #c90000; font-size: 0.9em; font-weight: bold; text-decoration: none;}