Système commentaire php et jquery

Eléphant du PHP | 283 Messages

28 oct. 2014, 13:56

Bonjour à tous,

J'ai trouvé un script sympa permettant de mettre en place le commentaire avec une animation sauf que je n'arrive pas à le mettre en place correctement.
Mon envoie de formulaire ne fonctionne pas avec le query mais fonctionne sans.
<?php
if(isset($_POST['ajout_commentaire'])){
		if(!empty($_POST['contenu'])){
				$posteur = $_SESSION['pseudo'];
				$contenu = $_POST['contenu'];
				$id_page = $_GET['id'];
				$date = date('Y-m-d');
				$commentaires= $bdd->prepare("INSERT INTO `commentaire` VALUES ('', ?, ?, ?, ?)");
				$commentaires->execute(array($id_page, $contenu, $posteur, $date));	
			}	
	}
?>
  <script>
$(document).ready(function() {
 	// Au submit du formulaire
 	$('#form').submit( function() {
 		var commentaire = $('#contenu').val();
 		// On supprime les anciens messages d'erreurs ou de succès
 		$('.erreur').remove();
 		$('.ok').remove();
 		// Si on a commentaire à ajouter
 		if (commentaire != '') {
 			// On compte le nombre de commentaire déjà présent + celui qui va être créé
 			var nbCom=1;
 			$('#commentaire p').each(function() { nbCom++; });
 			// On enlève la class "last" à l'ancien dernier
 			$('.last').removeClass('last');
 			// On ajoute le nouvel élément
 			$('#commentaire').prepend('<p class="last" id="com_'+nbCom+'"><strong>'+pseudo+'</strong> a dit :<br />'+commentaire+'</p>');
 			// On le met pair ou impair
 			if ($('.last').next().is('.pair'))
 				$('.last').addClass('impair');
 			else
 				$('.last').addClass('pair');
 			if (!$('.last').next().is('p'))
 				$('.last').addClass('first');
 			// On efface le contenu du formulaire
 			$('#contenu').val('').focus();
 			$('#contenu').after('<span class="ok">Commentaire ajouté avec succès</span>');
 			$('.ok').hide().fadeIn('slow');
 		} 		else {
 			if (commentaire == '')
 				$('#contenu').after('<span class="erreur">Champ requis</span>');
 			$('.erreur').hide().fadeIn('slow');
 		}
 		// On retourne false pour ne pas recharger la page
 		return false;
 	});
});
  </script>
<form action="" method="post" id="form">
 	<legend>Ajouter un commentaire</legend> 
<table width="100%" border="0">
<tr>
     <td>Commentaire:</td>
     <td><textarea name="contenu" id="contenu" cols="55" rows="10"></textarea></td>
</tr>
<tr>
     <td>Valider:</td>
     <td><input type="submit" name="ajout_commentaire" value="Envoyer" /></td>
</tr>
 </form>
 </table>
 <?php
$getCommentaireQuery = $bdd->query("SELECT * FROM `commentaire` WHERE id_page=".$_GET['id']." ORDER BY `id` DESC LIMIT 0,4") or die(mysql_error());
while($getCommentaires = $getCommentaireQuery->fetch())
{	
?> 
 <div id="commentaire">
 	<p class="last pair first" id="com_1"><strong><?=$getCommentaires['posteur']; ?></strong> a dit :<br /><?=$getCommentaires['contenu']; ?></p>
 </div>
<?php } ?>
En gros je voudrais juste ne pas rafraichir la page mais que le commentaire s'ajoute directement.
Merci d'avance à ceux qui pourront m'aider. ;)

ViPHP
xTG
ViPHP | 7331 Messages

28 oct. 2014, 14:10

Le script que tu as est loin d'être complet pour faire ce que tu veux.

1/
[javascript]// On retourne false pour ne pas recharger la page
return false;[/javascript]
Sauf que cela ne risque pas de fonctionner avec juste cela...
jQuery propose ceci pour stopper l'action : preventDefault()

2/
Il faut néanmoins que ton formulaire soit posté.
Pour cela il faut utiliser un appel asynchrone (Ajax) en méthode POST : http://api.jquery.com/jquery.post/
(tu trouveras de nombreux tutoriaux sur cette méthode en cherchant sur internet)

La finalité ?
Ton script actuel ajoute le message posté en utilisant l'animation.
La page n'est pas rechargée.
La requête asynchrone s'occupe d'appeler un script PHP qui insérera le message dans ta base de données.

Eléphant du PHP | 283 Messages

30 oct. 2014, 23:11

D'accord merci pour tes conseils xTG. ;)