Ajouter des messages sans rechargement de page avec PHP et jQuery

Voici un petit script qui vous permettra d’ajouter des messages rapidement et sans recharger la page, il est basé sur PHP et jQuery.

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
• style.css :  Style de la page

index.php

<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>
						<div>'. $msg .'</div>
					</li>';
				}

			?>
		</ul>
	</div>

new_data.php

<?php
//Fichier pour l'appel à la base de données
include_once('../config.php');

if(isset($_POST['message']))
{
	$message 	= $_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'];

	?>
	<li>
		<div><?php echo $msg; ?></div>
	</li>
	<?php
}

?>

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 { 
	display:none;
	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;
}

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

Code Javascript

$(function() {
		$(".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();
					}
				});
			} 
			return false;
		});
	});

N’oubliez pas d’inclure un appel vers la librairie jQuery.

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