Faire un toggle sur un tableau JQuery

Version imprimable

Bonjour,

je fais de nouveau appel à vos connaissances car j'ai un problème pour selectionner un element de ma page pour faire un toggle.

un peu de code vaut mieu qu'un roman.
Code:

1 2 3 4 5 <script> function ouvrirCommentaire(obj){ $(obj).next(".comments").toggle(); } </script>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <span class="comments_button" onclick="ouvrirCommentaire(this);">Commenter</span> <table class="comments" id="25"> <tr> <td> <table> <div id="comment_input"></div> <tr> <td><i>Commentaire 1</i></td> </tr> <tr> <td><i>Commentaire 2</i></td> </tr> <tr> <td> <textarea id ="monDiv" class="comment_post" cols="40" rows="2" style="border: 1px solid rgb(200,200,250);" placeholder="Ecrire un commentaire..."></textarea> </td> </tr> </div> </table> </td> </tr> </table>
Quand je fais un alert de mon obj je vois bien que je suis dans le SPAN mais ensuite quand j'essaie d'afficher le $(obj).next(".comments") , cela me retourne Object Object , j'imagine que c'est un objet jquery mais cela ne m'avance pas mieu.

PS: j'ai rajouter un display:none dans le css pour ".comments".
Merci

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
$( "span.comments_button" ).on( "click", function(){
	$( this ).next( ".comments" ).toggle();
});
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
		.comments { display: none; }
		#monTextarea { border: 1px solid rgb(200,200,250); }
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1333771/jquery/faire-toggle-tableau-jquery/">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<span class="comments_button">Commenter</span>
 
<!--
/*
 * Structure de la table !
 * Un id commence par une lettre pas par un nombre.
 * L'id du textarea a été modifié.
 */
-->
<table id="table25" class="comments">
	<tbody>
		<tr>
			<td>
				<table>
					<tbody>
						<tr>
							<td>
								<div id="comment_input">
 
								</div>					
							</td>
						</tr>
						<tr>
							<td>
								<i>Commentaire 1</i>
							</td>
						</tr>
						<tr>
							<td>
								<i>Commentaire 2</i>
							</td>
						</tr>
						<tr>
							<td>
								<textarea id="monTextarea" class="comment_post" cols="40" rows="2" placeholder="Ecrire un commentaire..."></textarea>
							</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
	</tbody>
</table>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-04-19T21:25:28.127+02:00" pubdate>2013-04-19T21:25:28.127+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

20/04/2013, 14h11
ketaaa

Merci beaucoup pour votre efficacité
20/04/2013, 18h31
ketaaa
Est-il possible de faire
Code:

1 2 3 4 var id_post = $(obj).attr("id"); var mess = "#commentaires" + id_post; $(document.getElementById(mess)).toggle();
Car cela ne fais rien chez moi , je n'arrive vraiment pas a gerer ses toggle() :/
20/04/2013, 22h23
danielhagnoul

Si je comprends bien votre tentative, alors simplement : $( "#commentaires" + obj.id ).toggle();.

Merci beaucoup , j'aurai une derniere question , j'utilise une requete ajax pour charger les commentaires à chaque fois qu'un utilisateur va cliquer sur une image , et les retirer quand il clique sur une autre.

Voila mon code de la requete ajax
Code:

1 2 3 4 5 6 7 8 9 10 11 12 var data = { post : id_post }; $.ajax({ url : "chargement_commentaire.php", data : data, complete : function(xhr, result){ if(result != "success") return; var response = xhr.responseText; alert(response); if (response) $("<tr></tr>").html(response).hide().appendTo(mess).slideDown(); } });
La premiere fois , les données sont correct dans response et le slideDown() se passe correctement , lors du deuxieme clique , les données dans response sont correct mais le slideDown() ne fonctionne pas!

Merci beaucoup , je commence à comprendre la puissance de JQuery

22/04/2013, 00h51
danielhagnoul
Bonsoir

Ici il faut séparer les ordres.

Le slide se fait sur le "tr" ou sur "mess" (je ne sais pas de quoi il s'agit) ?
Code:

1 2 3 $("<tr></tr>").html(response).hide().appendTo(mess); $("<tr></tr>").slideDown(); // ou $( mess ).slideDown();
26/04/2013, 21h56
ketaaa

thanks it works!