11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Je commence par préciser que je suis néophyte dans l'utilisation de symfony mais que je fais actuellement un site perso pour justement apprendre.
Je souhaite réaliser un affichage des commentaires de mes news de manière à ce qu'ils s'affichent lorsque l'utilisateur clique sur un div contenant par exemple "voir les commentaires" à l'aide de jquery. Or la sélection de l'élément suivant ne marche pas du tout et je suis un peu perdu.

J'ai procédé par étape :
1) Téléchargement de jquery puis ajout du fichier dans web/js/
2) Création du fichier comment.js qui contiendra les instructions jquery dans web/js/
3) Edition du fichier view.yml de mon app frontend de manière à ce que les fichier .js soient trouvés (après divers tests je pense qu'ils le sont)
4) Je fais le bout de code pour les commentaires (il n'est pas encore mis en forme mais les commentaires s'affichent bien) :

<div class="commentNews" style="cursor:pointer;">
		[ <?php echo $intNombreCommentaires; ?> ]
                    <div>
                        <?php
                        $comments = CommentsPeer::getComments($new->getId());
                        foreach($comments as $comment):
                                echo $comment->getDate('d/m/Y');
                                echo $comment->getPseudo();
                                echo $comment->getCommentaire();
                        endforeach;?>
                    </div>
</div>

5) J'écris le javascript dans le fichier comment.js :
jQuery().ready(function(){
    $(".commentNews").next("div").hide();
    $(".commentNews").click(function(){
        $(this).next("div").slideToggle("slow")
    });
});


L'idée est donc que lorsque l'on clique sur le div possédant la classe "commentNews", l'élément suivant (donc le div juste après) s'affiche avec un effet slideToggle. Mais la sélection de l'élément suivant n'a pas du tout l'air de se faire :
Avec
$(".commentNews").next("div").hide();
, rien ne se cache lorsque j'affiche la page. Si j'enlève .next("div"), le div contenant la class "commentNews" se cache bien (j'ai essayé avec ("<div>") aussi rien y fait). Si je remplace
$(this).next("div").slideToggle("slow")
par alert("hello"), (l'élément suivant de la div contenant la class "commentNews" est toujours malheureusement affiché) dès que je clique sur une des deux div j'ai bien le message d'alerte.

Je vois pas trop d'où cela vient, je pense que ca devrait marcher. J'espère m'être exprimé suffisament clairement, si quelqu'un à des idées je suis prenneur. Merci
Modifié par Pulsar (29 Nov 2009 - 12:40)
J'ai trouvé Smiley biggrin
Problème de siblings, les div devaient être les unes à la suite des autres pour que l'élément next marche correctement.