Dédoublement Jquery / ajax

Bonjour / bonsoir.

Je développe une petite application web, style Portfolio. Dans ma partie administration, je crée une page pour gérer l'ensemble des commentaires que les utilisateurs pourrons laisser.
Ces commentaires sont enregistré dans une base de donnée, et pour les extraires j'utilise donc Ajax. bref.

Tout ce passe très bien, mes données sont bien extraites de la base, et ce qui m'ai renvoyé pour ma fonction , dans cette fonction je récupère mes données au format JSON et ajoute le contenue dans ma page html grace à une boucle. et le problème viens de la, ma boucle ajoute bien la ligne mais la double.. voici le code avec explication :

le html .. très basique:

<div id="messages">
	<table>
		<thead>
			</thead><th>N°</th><th>Auteur</th><th>MAil</th><th>Site</th><th>Contenu</th><th>Supprimer</th>
		<tbody></tbody>
	</table>
</div>

le php .. aussi très basique :

case "GET":
  $connection = new PDO($dsn, $username_bdpinar, $password_bdpinar);
  $recordset = $connection->query('SELECT * FROM commentaires');
  $data = $recordset->fetchALL(PDO::FETCH_ASSOC);
  header("Content-Type:application/json; charset=utf-8");
  echo json_encode($data);
  $connection = null ;
break;

et mon code jquery ... basique aussi .. décidément ! lol

$("nav ul li a").click( function(){
  id = $(this).attr("id");
  $("section").load("../html/"+id+".html", function(){
  switch (id){
   case "messages" :
	$.ajax({
	  url : "messages.php",
	  type :"GET",
	  success : function(data){
		for(i=0;i<data.length;i++){
		    $("#messages table tbody").append("<tr><td>"+data[i].com_id+"</td><td>"+data[i].com_pseudo+"</td>
<td>"+data[i].com_mail+"</td><td>"+data[i].com_site+"</td><td>"+data[i].com_contenu+"</td>
<td><button onclick='supp_messages()'>X</button></td></tr>");
		}
	  },
	});
 break;
} // fin switch
}); // fin load
}); // fin click

et je reçoit ceci : ( je recoit aussi les boutons "X" mais je ne les affiche pas )

N° Auteur MAil Site Contenu
1 toto toto@toto toto Trop bien les photos, continue !!!
2 titi null titi Whaouuu
3 tutu titi@titi tutu Bof bof hein !!!
4 tete null tete hahahahah !!
5 dudu null dudu trop fat lol !
1 toto toto@toto toto Trop bien les photos, continue !!!
2 titi null titi Whaouuu
3 tutu titi@titi tutu Bof bof hein !!!
4 tete null tete hahahahah !!
5 dudu null dudu trop fat lol !


Voila j'espère que quelqu'un pourras m'aider parcque je galère avec ce problème. Donc un regard extérieur serai le bienvenu . Merci [/i][/i][/i][/i][/i]
Modifié par romainPina (29 Jan 2012 - 21:13)

Une page d'exemple ?

a la fin du méssage, il y a ce que je recoit ^^

Bonjour,
Oui, mais une page d'exemple, c'est encore mieux.

Bon voici le liens ou est hébergé la page :
http://213.41.212.217/~pinar/piman/admin/php/index.php
Cette page vous redirigera automatiquement vers la connexion : les id sont :
login : papa - mdp : papa
Une fois dessus lors du clique sur méssage vous verrez qu'il récupère bien 1 jeu d'enregistrement, mais que la boucle dans ma fonction $.ajax -> success duplique à chaque ajout la ligne.

Peut-être est-ce parce qu'une fois chargé le contenu de "http://213.41.212.217/~pinar/piman/admin/html/messages.html", tu te retrouves avec 2 éléments ayant l'id messages (ton lien et le div dans lequel tu écris ta table).
Modifié par loicbcn (30 Jan 2012 - 13:41)

J'allais dire pareil, tu as 2 fois un id, qui est sensé être unique.
Modifié par kenor (30 Jan 2012 - 13:51)

<div id="messages">

	<table>
		<thead>
			[b]</thead>[/b]<th>N°</th><th>Auteur</th><th>MAil</th><th>Site</th><th>Contenu</th><th>Supprimer</th>
		<tbody></tbody>
	</table>

</div>

Il y a un soucis ici

Ton <thead> se ferme tout de suite

ça doit probablement être soucis de DOM.

Sinon, concernant ton code JS, il est conseillé de mettre dans une variable ce que tu veux ajouter au DOM et ensuite seulement le rajouter.

et donc le append() dans la boucle, ne va pas (question de perf.).

Je serais toi, je fais un variable var tbody = '<tbody>'; dans la boucle, je le remplis tbody += '<tr>....</tr>'; et après la boucle tbody += '</tbody>'; $('#messages table').append(tbody);
Modifié par kenor (30 Jan 2012 - 14:36)

Ha ! Pas faux merci bien le problème venait bien d'ici. Bien joué
Je prend note pour l'optimisation du js. Je vais modifier tout ca merci