Discussion :

[Hhissen]

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.

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é 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


code source pour le textarea et son boutton

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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....

[Toufik83]

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.

[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.

[Toufik83]

par exemple si on prend ce code php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
    $("body").on("click",".test",function(){alert("clicke");});

[Hhissen]

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

[Hhissen]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Invité]

Bonjour,

à modifier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Toufik83]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
 });