PHPfrance

la communauté d'entraide francophone dédiée au PHP

Système de commentaires comme Facebook

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Système de commentaires comme Facebook

Re: Système de commentaires comme Facebook

par yann18 » 28 nov. 2013, 18:45

onkeypress comme événement suffit à soumettre le formulaire via la requête ajax donc pas besoin d'un submit pour insérer les données.

[javascript]
<script type="text/javascript">

coms_statutid = $(this).find('input[name=coms_statutid]').val();
$('#coms_text<?php echo $statut['statut_id']; ?>').keypress(function(e) {
if(e.which == 13) {


coms_text = $(this).find('input[name=coms_text]').val();

coms_userid = $(this).find('input[name=coms_userid]').val();
coms_statutid = $(this).find('input[name=coms_statutid]').val();
$.post('http://home.web-astronomie.fr/addcom.ph ... rmCom<?php echo $statut['statut_id']; ?>').serialize(),function(data){
if(data == 'ok'){
$('#newsCom<?php echo $statut['statut_id']; ?>').append('<p>Envois réussi</p>').hide().fadeIn();
$('#coms_text<?php echo $statut['statut_id']; ?>').attr('value','');
return false;
} else {
return false;
}
});
// return false;

e.preventDefault();
}
});

</script>
[/javascript]

Re: Système de commentaires comme Facebook

par nico44530 » 28 nov. 2013, 01:37

J'ai remplacé le textarea par un input et ça fonctionne pour le submit ENTER.
Mais j'ai un autre problème :

- Dès que je poste un 1er commentaire, il s'affiche bien. Et quand j'en poste plusieurs à la suite, ils sont doublés (x2 au nombre de posts) dans ma base de données.

Voici mon code html / js ainsi que php : 
			<div id="contentStatut">
				<script type="text/javascript">var statut_nom = '<?php echo ucfirst($data['nom']); ?>';var statut_pseudo = '<?php echo $data['pseudo']; ?>';var statut_prenom = '<?php echo ucfirst($data['prenom']); ?>';var statut_userID = '<?php echo $data['id']; ?>';var statut_ID = '<?php echo $statutInfos['statut_id']; ?>';var statut_date = '<?php echo getRelativeTime(date('Y-m-d H:i:s')); ?>';</script>
				<ul><?php $req = $connect->prepare('SELECT * FROM statut LEFT JOIN users ON statut.statut_userid = users.id ORDER BY statut_date DESC');$req->execute(); ?> 
					<div id="newsStatut" class="hidden"></div><?php while($statut = $req->fetch()){ ?> 
					<script type="text/javascript">var statut_nom = '<?php echo ucfirst($data['nom']); ?>';var statut_pseudo = '<?php echo $data['pseudo']; ?>';var statut_prenom = '<?php echo ucfirst($data['prenom']); ?>';var statut_userID = '<?php echo $data['id']; ?>';var statut_ID = '<?php echo $statut['statut_id']; ?>';var statut_date = '<?php echo getRelativeTime(date('Y-m-d H:i:s')); ?>';</script>
					<li class="statutPost clearfix">
						<a href="<?php echo $wa_urlHome; ?>/<?php echo $statut['pseudo']; ?>" class="statutLink floatl">
							<div class="statutAvatar floatl" ><img src="../img/avatars/<?php echo $statut['statut_userid']; ?>-mini.jpg" width="49" height="49" alt="" /></div>
						</a>
						<div class="statutData">
							<a href="<?php echo $wa_urlHome; ?>/<?php echo $statut['pseudo']; ?>"><strong><?php echo ucfirst($statut['prenom']); ?> <?php echo ucfirst($statut['nom']); ?></strong></a>
							<p class="statutText"><?php echo nl2br(trim($statut['statut_text'])); ?></p>
							<div class="statutPlus">
								<a href="" class="fs11 statutLikeCom">J'aime</a><span class="statutPoint"> · </span><a href="#" onclick="$('#statutText<?php echo $statut['statut_id']; ?>').focus();return false;" id="statutCom<?php echo $statut['statut_id']; ?>" class="fs11 statutLikeCom">Commenter</a><span class="statutPoint"> · </span><p class="fs11 statutDate"><?php echo getRelativeTime($statut['statut_date']); ?></p>
							</div>
							<div class="statutComments">
								<div class="statutComArrow"></div>
								<div id="newsCom<?php echo $statut['statut_id']; ?>" class="hidden"></div>
								<img src="../img/avatars/<?php echo $data['id']; ?>-mini.jpg" class="floatl" height="33" width="33" alt="" />
								<form action="#" method="post" id="formCom<?php echo $statut['statut_id']; ?>">
									<input type="hidden" name="coms_statutid" value="<?php echo $statut['statut_id']; ?>" />
									<input type="hidden" name="coms_userid" value="<?php echo $data['id']; ?>" />
									<input type="text" placeholder="Écrire un commentaire" autocomplete="off" name="coms_text" class="commentsText" id="coms_text<?php echo $statut['statut_id']; ?>"></input>
								</form>
								<script type="text/javascript">
								coms_statutid = $(this).find('input[name=coms_statutid]').val();
								$('#coms_text<?php echo $statut['statut_id']; ?>').keypress(function(e) {
									if(e.which == 13) {
										$('#formCom<?php echo $statut['statut_id']; ?>').submit(function(){
												coms_text = $(this).find('input[name=coms_text]').val();
												coms_userid = $(this).find('input[name=coms_userid]').val();
												coms_statutid = $(this).find('input[name=coms_statutid]').val();
												$.post('http://home.web-astronomie.fr/addcom.php',$('#formCom<?php echo $statut['statut_id']; ?>').serialize(),function(data){
													if(data == 'ok'){
														$('#newsCom<?php echo $statut['statut_id']; ?>').append('<p>Envois réussi</p>').hide().fadeIn();
														$('#coms_text<?php echo $statut['statut_id']; ?>').attr('value','');
														return false;
													} else {
														return false;
													}
												});
											return false;
										});
									}
								});
								</script>
							</div>
						</div>
					</li><?php } $req->closeCursor(); ?> 
				</ul>
			</div>

<?php
session_start();
require('include/config.inc.php');

$coms_text = htmlentities(trim($_POST['coms_text']));
$coms_statutid = $_POST['coms_statutid'];

if(isset($coms_text) && !empty($coms_text)){
	extract($_POST);
	$req = $connect->prepare("INSERT INTO coms(coms_id,coms_userid,coms_statutid,coms_text,coms_date) VALUES('','".$_SESSION['id']."','".$coms_statutid."','".trim($coms_text)."',now())");
	$req->execute();
	$req->closeCursor();
	echo 'ok';
} else {
	echo 'erreur';
}
?>
Je ne sais pas d'où ça vient :(
Merci d'avance

Re: Système de commentaires comme Facebook

par yann18 » 27 nov. 2013, 20:10

il faut lancer ta requête ajax avec l'événement keydown (et non submit).Une fois la touche entrée appuyée, l'événement keydown du textarea est déclenché:
[javascript]

$('textarea').keydown(function (event){
if(event.keyCode == 13){ //touche entrée pressée

//alert('bouton entrée clique');
//exécution de la requête ajax
}

})


[/javascript]

Système de commentaires comme Facebook

par nico44530 » 27 nov. 2013, 15:54

Bonjour,

J'ai créé un système de commentaire qui s'affiche en ajax en dessous de l'article posté (comme fb)
Le problème c'est que j'aimerais que le submit se fait avec la touche ENTER.

Voici mes scripts :

La partie <form class="formCom"> est le formulaire des commentaires concernés

[javascript]
$('#formCom').submit(function(){
coms_text = $(this).find('input[name=coms_text]').val();
coms_userid = $(this).find('input[name=coms_userid]').val();
coms_statutid = $(this).find('input[name=coms_statutid]').val();
$.post('http://home.web-astronomie.fr/addcom.ph ... tion(data){
if(data == 'ok'){
alert('Envois réussi !');
$('.coms_text').css({'height':'14px'});
$('.coms_text').attr('value','');
} else {
alert('Erreur !');
}
});
});
[/javascript]
<div id="contentStatut">
	<script type="text/javascript">var statut_nom = '<?php echo ucfirst($data['nom']); ?>';var statut_pseudo = '<?php echo $data['pseudo']; ?>';var statut_prenom = '<?php echo ucfirst($data['prenom']); ?>';var statut_userID = '<?php echo $data['id']; ?>';var statut_ID = '<?php echo $statutInfos['statut_id']; ?>';var statut_date = '<?php echo getRelativeTime(date('Y-m-d H:i:s')); ?>';</script>
	<ul><?php $req = $connect->prepare('SELECT * FROM statut LEFT JOIN users ON statut.statut_userid = users.id ORDER BY statut_date DESC');$req->execute(); ?> 
		<div id="newsStatut" class="hidden"></div><?php while($statut = $req->fetch()){ ?> 
		<script type="text/javascript">var statut_nom = '<?php echo ucfirst($data['nom']); ?>';var statut_pseudo = '<?php echo $data['pseudo']; ?>';var statut_prenom = '<?php echo ucfirst($data['prenom']); ?>';var statut_userID = '<?php echo $data['id']; ?>';var statut_ID = '<?php echo $statut['statut_id']; ?>';var statut_date = '<?php echo getRelativeTime(date('Y-m-d H:i:s')); ?>';</script>
		<li class="statutPost clearfix">
			<a href="<?php echo $wa_urlHome; ?>/<?php echo $statut['pseudo']; ?>" class="statutLink floatl">
				<div class="statutAvatar floatl" ><img src="../img/avatars/<?php echo $statut['statut_userid']; ?>-mini.jpg" width="49" height="49" alt="" /></div>
			</a>
			<div class="statutData">
				<a href="<?php echo $wa_urlHome; ?>/<?php echo $statut['pseudo']; ?>"><strong><?php echo ucfirst($statut['prenom']); ?> <?php echo ucfirst($statut['nom']); ?></strong></a>
				<p class="statutText"><?php echo nl2br(trim($statut['statut_text'])); ?></p>
				<div class="statutPlus">
					<a href="" class="fs11 statutLikeCom">J'aime</a><span class="statutPoint"> · </span><a href="#" onclick="$('#statutText<?php echo $statut['statut_id']; ?>').focus();return false;" id="statutCom<?php echo $statut['statut_id']; ?>" class="fs11 statutLikeCom">Commenter</a><span class="statutPoint"> · </span><p class="fs11 statutDate"><?php echo getRelativeTime($statut['statut_date']); ?></p>
				</div>
				<div class="statutComments">
					<div class="statutComArrow"></div>
					<div id="newsCom" class="hidden"></div>
					<img src="../img/avatars/<?php echo $data['id']; ?>-mini.jpg" class="floatl" height="33" width="33" alt="" />
					<form action="#" method="post" class="formCom" onsubmit="return false;">
						<input type="hidden" name="coms_statutid" value="<?php echo $statut['statut_id']; ?>" />
						<input type="hidden" name="coms_userid" value="<?php echo $data['id']; ?>" />
						<textarea placeholder="Écrire un commentaire" name="coms_text" class="elastic coms_text"></textarea>
					</form>
				</div>
			</div>
		</li><?php } $req->closeCursor(); ?> 
	</ul>
</div>
Merci d'avance ;)