IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Faire un toggle sur un tableau JQuery


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    62
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 62
    Par défaut Faire un toggle sur un tableau JQuery
    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

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    62
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 62
    Par défaut
    Merci beaucoup pour votre efficacité

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    62
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 62
    Par défaut
    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() :/

  5. #5
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Si je comprends bien votre tentative, alors simplement : $( "#commentaires" + obj.id ).toggle();.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    62
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 62
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. faire un unique sur un tableau de plusieurs colonnes
    Par yehoudaT dans le forum MATLAB
    Réponses: 2
    Dernier message: 23/10/2013, 11h08
  2. [XL-2000] Faire un tri sur un tableau à partir d'une colonne de celui-ci
    Par noobie dans le forum Macros et VBA Excel
    Réponses: 9
    Dernier message: 06/05/2010, 14h28
  3. comment faire effet de survol CSS sur un tableau
    Par yodark dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 01/08/2007, 08h40
  4. Réponses: 2
    Dernier message: 06/09/2006, 23h20
  5. Comment faire un Drag&Drop sur un tableau
    Par Stef.web dans le forum Composants VCL
    Réponses: 6
    Dernier message: 11/10/2003, 13h12

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo