Faire un toggle sur un tableau JQuery

**ketaaa** · 19/04/2013, 19h58

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 :

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

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

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

**danielhagnoul** · 19/04/2013, 21h26

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

**ketaaa** · 20/04/2013, 14h11

Merci beaucoup pour votre efficacité

**ketaaa** · 20/04/2013, 18h31

Est-il possible de faire

Code :

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

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() :/

**danielhagnoul** · 20/04/2013, 22h23

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

**ketaaa** · 21/04/2013, 14h52

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 :

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

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

**danielhagnoul** · 22/04/2013, 00h51

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 :

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

1
2
3
$("<tr></tr>").html(response).hide().appendTo(mess);
 
$("<tr></tr>").slideDown(); // ou $( mess ).slideDown();

**ketaaa** · 26/04/2013, 21h56

thanks it works!

Faire un toggle sur un tableau JQuery

jQuery

Discussions similaires

Partager

Partager