Forum : Erreur Onclick="$(this)... jQuery

Bonjour,

Voila mon probleme, j'ai suivi les tutos pour développer un site en MVC à la lettre, par change j'ai jamais eu trop de souci lors des premires vidéos mais à la 4ème .. j'aiun petit souci, qui n'as pas une grande importance je pense mais qui m'embête :p ,

Ma function debug($var) fonctionne mais pas le "onclick" sur le lien

<?php function debug($var){ $debug = debug_backtrace(); echo '<p> </p><p><a href="#" onclick="$(this).parent().next(\'ol\').slideToggle(); return false;"><strong>' .$debug[0]['file'].' </strong> l.'.$debug[0]['line'].'</a></p>'; echo '<ol>'; foreach($debug as $k=>$v){ if($k>0){ echo '<li><strong>' .$v['file'].' </strong> l.'.$v['line'].'</a></li>'; }} echo '</ol>'; echo '<pre>'; print_r($var); echo '</pre>' ;} ?>

Comme dans la video 4 du tuto "developper un site php de a à z" a 33min20, j'aimerai qu'en cliquant sur le lien, toute la liste de lien contenu dans le <ol> disparaisse/apparaisse ..

Or rien ne se passe, lorsque j'ouvre mon inspecteur pour regarder ou ca coince, ca me dit "ReferenceError: Can't find variable: $" (celle qui est apres le onclick="$(this).parent()..."

Ca serait genial que quelqu'un sache d'ou vient mon problemme, est ce que c'est pck je n'ai pas jQuery ou est cel organisationde mes divs enfin je sais plus quoi penser ..

14 réponses

AlexJM,

il y a 9 ans

Salut, mets une classe sur le lien et mets ce script à la fin :

$(function(){ $('.lenomdetaclasse').click(function(e){ e.preventDefault() $(this).parent().next('ol').slideToggle() }) })

McDev,

il y a 9 ans

merci bcp, j'ai essayé ca direct mais j'ai pas su exactement ou mettre ce bout de code... j'suis pas bien doué encore, est ce dans le onclick="...ici???..." ou je laisse tout ce que j'ai et je met votre bout de script a la fin ? ou est ce autre chose ? :p merci bcp d'avoir répondu aussi vite encore :)

SLK,

il y a 9 ans

Salut,

Ce bout de code dans ton fichier PHP :

$(this).parent().next(\'ol\').slideToggle();

C'est du jQuery, que PHP ne peut pas comprendre.

AlexJM te dis de virer complètement le onclick qui est sur ton lien en fait.

L'intéraction du "clic sur le lien qui appel un bout de code" se fera par du javascript, c'est le bout de code qu'il t'a donné.
Ce bout de code en javascript, tu as 2 façon de "l'insérer" :
1) directement dans le ficher PHP, en utilisant la balise < script >:

// fichier PHP <script> $(function(){ $('.lenomdetaclasse').click(function(e){ e.preventDefault() $(this).parent().next('ol').slideToggle() }) }) </script> // Il me semble que tu dois mettre ça , plus haut dans ton fichier, que la ligne du lien qui va faire appel à ce code (je ne suis pas sûr de moi sur ce coup là).

2) Dans un fichier à part, "nom_fichier.js" que tu inclu dans ton fichier .php

// fichier PHP <script src="chemin_vers_le_fichier/nom_fichier.js"></script> // n'importe où dans le fichier PHP (en général à la fin, avant le </body> fermant) // fichier JS $(function(){ $('.lenomdetaclasse').click(function(e){ e.preventDefault() $(this).parent().next('ol').slideToggle() }) })

Le "lien" entre PHP et JS ne peut se faire qu'avec les "class" ou "id".
Ici on a choisi d'attribuer à ton lien, la classe "lenomdetaclasse", donc il faut la rajouter sur ta balise < a > :

Par contre le code JS me parait un peu lourd, je n'aurai mis que ça :

$(' .lenomdetaclasse ').click(function() { $( this ).parent().next('ol').slideToggle(); }); // le preventDefault empêche le lien d'aller vers son href, mais comme ici il va vers "#", ça me semble un peu de trop.

McDev,

il y a 9 ans

merci bcp a tous les 2 pour votre aide

McDev,

il y a 9 ans

Finalement j'ai un dernier petit souci ... les balises script dans le PHP ont l'air de pas tres bien etre reconnues..

Dois-je faire un echo '<.script>...<./script>' ?

ou simplement utiliser un fichier a part, cela m'arrangerait que ce soit dans le PHP directement :/

AlexJM,

il y a 9 ans

Je vais me permettre de donner une petite explication supplémentaire et de corriger un peu ce que tu as dit.

Tout d'abord, dans ton fichier php, tu as du code html :

<!DOCTYPE html> <html> <head>  </head> <body>  </body> </html>

Ensuite, tu as aussi le code php, sous la forme

<?php /*code php*/ ?>

<!DOCTYPE html> <html> <head>  </head> <body>  <?php /*code php*/ ?> </body> </html>

Et même à d'autres endroits.

Ensuite, tu peux ajouter ton javascript. Ce qui est fait, majoritairement, à la fin du fichier, pour pas bloquer le chargement de la page :

<!DOCTYPE html> <html> <head>  </head> <body>  <?php /*code php*/ ?> <script></script> </body> </html>

Alors voilà, tu as ta balise scrit pour inclure du javascript. Tu as maintenant deux choix :
1) Tu mets ton javascript dans un fichier extérieur (par exemple app.js) :

$(function(){ $('.lenomdetaclasse').click(function(e){ e.preventDefault() $(this).parent().next('ol').slideToggle() }) })

Et tu l'appelles avec l'attribut src de la balise script :

<!DOCTYPE html> <html> <head>  </head> <body>  <?php /*code php*/ ?> <script src="liendetonfichier/app.js"></script> </body> </html>

2) Tu mets directement ton javascript dans ton html :

<!DOCTYPE html> <html> <head>  </head> <body>  <?php /*code php*/ ?> <script> $(function(){ $('.lenomdetaclasse').click(function(e){ e.preventDefault() $(this).parent().next('ol').slideToggle() }) }) </script> </body> </html>

Tout en n'oubliant pas que tu dois charger jquery par la première méthode.

Ensuite, passons à l'explication du code javascript

$(function(){ $('.lenomdetaclasse').click(function(e){ e.preventDefault() $(this).parent().next('ol').slideToggle() }) })

A la premiere ligne, on appelle la fonction $ avec comme paramètre une fonction anonyme. Dans cette fonction, on exécutera TOUT ce qui est en rapport avec jquery. En effet, elle assure que jQuery ainsi que la page a bien fini de charger

Ensuite, tu sélectionne toujours via la fonction $('...') tous les éléments que tu pourrais sélectionner en css avec le ..., donc là tu sélectionne tous les éléments ayant comme classe "lenomdetaclasse"

Le .click, tu ajoutes un "listener", un écouteur, qui écoute l'événement click sur tous ces éléments et tu passes en paramètre une fonction anonyme qui s'exécute au click

Pour la fonction anonyme, en paramètre, tu as l'événement

Le e.preventDefault() permet d'empêcher ce qui se passe par défaut, comme aller vers une autre page

Le $(this) permet de sélectionner l'élément cliqué, et la suite du code c'est celle que tu as donné

J'espere que tu as compris, si tu as encore des questions n'hésite pas ;)

McDev,

il y a 9 ans

mon probleme vient surement du fait que la page php dans laquelle j'ecris est en realité le contenu d'une autre page, avec laquelle j'appelle le contenu...

Je n'ai donc pas de doctype, head et body. Je n'ai pas non plus chercher a charger JQuery..

je vais essayer de me debrouiller avec les renseignzments tres complets de ta reponse merci bcp encore une fois et navré de poser des questions si peu constructives pour le forum :/

AlexJM,

il y a 9 ans

page php dans laquelle j'ecris est en realité le contenu d'une autre page

Et tu charges ta page avec un include ?

McDev,

il y a 9 ans

Voici des photos de mon editeur html/php, sur la gauche vous pouvez voir le schéma du site, cela poura peut etre vous aider a comprendre d'ou venait mon probleme :)
https://drive.google.com/file/d/0B2WPAteCPfi5bmdBRkNHUXBONTA
https://drive.google.com/open?id=0B2WPAteCPfi5a3pFSGR6NWJxZ0U

Ce qui donne ceci sur un navigateur (ici safari)
https://drive.google.com/file/d/0B2WPAteCPfi5NlloZFJoNDUyNUk

mon problème étant qu'au click sur la ligne bleue, les trois petits liens noirs contenu dans un "ol" ne disparaissent/apparaissent pas.

SLK,

il y a 9 ans

Si tu utilises la méthode 2) d'alexJM, tu peux mettre ton javascript dans les "view.php" (à l'intérieur d'une balise : < script >< /script >).

Si tu utilise la méthode 1) c'est dans ton fichier view/layout/default.php qu'il faut mettre la balise < script src="chemin_vers_fichier_js">< /script >
(juste avant la balise < /body > "fermante"

McDev,

il y a 9 ans

merci bcp j'vois comment charger jQuery maintenant et merci a vous tous, vous m'avez bien eclairé merci bcp ! :)

Tres interessant le developpement, domage que je galere autant :/

AlexJM,

il y a 9 ans

Pas de problème, pense à regarder la série javascript que Grafikart est entrain de faire ;)

McDev,

il y a 9 ans

Ca marche pas de souci, j'suis pas H24 sur mon ordi en ce moment mais j'hesiterais pas a aller voir son tuto des que j'aurais besoin ;)

Ils sont tous geniaux de toute facon les tutos de GrafikArt

McDev,

il y a 9 ans

j'ai trouvé une solution aléatoire, charger jQuery dans le default.php situé dans layout :) (solution qui me semble etre celle de base sur le tuto