Commentaires pour plusieurs posts en Php,Ajax et Mysql

Version imprimable

1 pièce(s) jointe(s)

Bonjour Chers dev,
je suis entrain de développer un petit reseau social pour mon entrainement perso. j'ai fais pas mal de fonctionnalités parmi les quelles celle de permettre à l'utilisateur de poster et commenter sur son son mur. Tout marche nikel (du point de vue php/mysql) sof k j'aimerais que les commentaires se fassent de façon asynchrone. j'ai utilisé ajax mais ça ne marche que pour le premier poste rencontré, pour les restes des postes, si je fais insérer un commentaire, ça ne marche pas:oops:.

J'ai cherché partout ailleurs une solution à ce problème qui me menace depuis déjà trois jours, je me tourne vers vous pour plus de clarté :D et je vous remercie d'avance .

voici une capture présentant deux postes : pour le premier, on peut très bien commenté mais le second non :oops:
Pièce jointe 268547

code source pour le textarea et son boutton
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div class="reply_form"> <div class="form-group"> <div class="row"> <div class="col-md-12"> <input type="text" style="width:100%;" class="form-control input-lg" name="message_commentaire" id="message_commentaire" placeholder="Laisser un commentaire"/> <input type="hidden" name="com_id" id="com_id" class="com_id" value="<?php echo $micropost->m_id; ?>"> </div> </div> <div class="row"> <div class="col-md-3"> <br> <input type="submit" value="envoyer" id="ajout_com" class="form-control btn btn-primary btn-xs ajout_com" > </div> </div> </div> </div>
code source ajax
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 $(document).ready(function() { $('#ajout_com').click(function(){ var message = $('#message_commentaire').val(); var id = $('#com_id').val(); if(message != ''){ $.post('ajax/post_comment.php',{message:message,id:id},function(){ $('#ajout_com').val('Working..'); recupComment(); $('#message_commentaire').val(''); }); $('#ajout_com').val('Envoyer'); } }); function recupComment(){ var id = $('#com_id').val(); $.post('ajax/recup_comment.php',{id:id},function(data){ $(data).insertBefore('#text-commentaire').slideDown(); }); } recupComment(); });
pour plus de précision, svp n'hesitez pas....

30/04/2017, 13h50
Toufik83

Citation:

Envoyé par Hhissen

pour le premier, on peut très bien commenté mais le second non

.
est-ce qu'il y'a une partie dynamique dans ton code html? une partie qui a été construit par le php?
si oui, alors il faut mentionner a jquery qu'il y'a des éléments dynamiques qu'il doit les prendre en considération.
attention aussi aux id (id="ajout_com",id="message_commentaire"), si tu as plusieurs éléments avec les mêmes id, c'est mauvais.
30/04/2017, 14h01
Hhissen

Merci M Toufik. Oui il y'a une partie dynamique, le problème est comment faire pour k le jquery prenne cela en considération.

Et pour mettre id, j'aurais dû mettre class , c 'est ce k vs voulez dire??

Merci encore pour votre intervention.
30/04/2017, 14h19
Toufik83
par exemple si on prend ce code php
Code:

1 2 3 4 while(la condition){ echo '<button id="test" class='test'></button>' }
plus qu'il y'a des résultats, plus que le php génére des boutons avec le même id, et ça c'est pas bon.
donc soit tu enlève les id, soit tu les remplace par des classes ou des data-id. a toi de choisir ce qui te convient le plus.

Citation:

Envoyé par Hhissen

le problème est comment faire pour k le jquery prenne cela en considération.

tu n'as qu'a changer la fonction de click sur l'élement comme suite :
$(id ou classe du parent statique de l'élément).on("click","class ou id de l'élément",function(){//traitement ici});

dans notre cas, cela devient :
Code:

1 2 $("body").on("click",".test",function(){alert("clicke");});
30/04/2017, 14h24
Hhissen

Bonjour Toufik.
Merci bcp , je vais essayer d'appliquer votre conseil et vs tiendrai au courant.
Mille mercis

Bonsoir M Toufick,
lorsque j'essaye de mettre les data-id , je recupere le meme identifiant pour tous les posts avec alert(id); ie pour le premier poste.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
$('.ajout_com').on('click',function(){
var id=$('.com_id').data("id");
	var message=$('.message_commentaire').data("message");
        // var message = $('.message_commentaire').val();
        // var id = $('.com_id').val();
        alert(id);
 
       if(message != ''){
            $.post('ajax/post_comment.php',{message:message,id:id},function(){
	    //$('.ajout_com').val('Working..');
	    recupComment();
	    $('.message_commentaire').val('');
	            });
	        //$('.ajout_com').val('Envoyer');
	        }
	    });

voici le code de mes champs id et textarea

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="row">
	<div class="col-md-12">
 
	<input type="text" style="width:100%;" data-message="message_commentaire" class="form-control input-lg message_commentaire" name="message_commentaire" placeholder="Laisser un commentaire"/>
	<input type="hidden" data-id="<?php echo $micropost->m_id; ?>" name="com_id" class="com_id" value="<?php echo $micropost->m_id; ?>">
	</div>
	</div>
	<div class="row">
		<div class="col-md-3">
		<br>
		<input type="submit" value="envoyer" class="form-control  btn btn-primary btn-xs ajout_com" >
		</div>
	</div>

Bonjour,

à modifier :

Code:

1
2
3
4
5
...
	<input type="text" style="width:100%;" data-message="message_commentaire" class="form-control input-lg message_commentaire" name="message_commentaire" id="message_commentaire<?php echo $micropost->m_id; ?>" placeholder="Laisser un commentaire"/>
...
		<input type="submit" value="envoyer" data-id="<?php echo $micropost->m_id; ?>" class="form-control  btn btn-primary btn-xs ajout_com" >
...

Code:

1
2
3
4
5
$('.ajout_com').on('click',function(){
	var id = $(this).data('id');
	var commentaire = $('#message_commentaire'+id).val();
	alert( 'id : ' + id + ' -> commentaire = ' + commentaire );
	...

et supprimer (devenu inutile) :

Code:

<input type="hidden" name="com_id" class="com_id" value="<?php echo $micropost->m_id; ?>">

bonsoir,
tu peux suivre le conseil de jreaux62, comme tu peux aussi gérer tout ça sans l'utilisation des id ni des data-id, en utilisant $.parents() et $.index(, tu peux facilement savoir le bouton "envoyer" sur lequel l'utilisateur a cliqué.
code html d'un exemple de 2 lignes (2 postes):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
  <div class="row">
    <div class="col-md-12">
      <input type="text" style="width:100%;" class="form-control input-lg message_commentaire" name="message_commentaire" value="oulalaaa" />
      <input type="hidden" name="com_id" class="com_id">
    </div>
  </div>
 
  <div class="row">
    <div class="col-md-3">
      <br>
      <input type="submit" value="envoyer" class="form-control  btn btn-primary btn-xs ajout_com">
    </div>
  </div>
 
  <div class="row">
    <div class="col-md-12">
      <input type="text" style="width:100%;" class="form-control input-lg message_commentaire" name="message_commentaire" value="jajajajaja" />
      <input type="hidden" name="com_id" class="com_id">
    </div>
  </div>
 
  <div class="row">
    <div class="col-md-3">
      <br>
      <input type="submit" value="envoyer" class="form-control  btn btn-primary btn-xs ajout_com">
    </div>
  </div>

Code:

1
2
3
4
5
6
 
  $('.ajout_com').on('click', function() {
   var index = $(this).parents(".row").index(),// index du parents .row
     msg = $(".row").eq(index - 1).find("input[type='text']").val();// puis on cherche le .row ayant l'index index-1 (juste avant)
   console.log(msg + " index :" + index);
 });