[jQuery] - $ is not defined

Laznet
Javascript

Bonsoir,

J'apprend actuellement jQuery, et pour tester que mon code fonctionne j'ai mis un console.log();, je vais donc dans ma console pour voir si mon message est bien affiché.
Et j'ai le droit a cette erreur : Uncaught ReferenceError: $ is not defined, sauf que ce qui est bizarre c'est que le $ qui est en cause permet d'attendre que jQuery soit bien chargé.
J'ai bien importer jQuery, au début je pensais que ça venait du fichier que j'avais téléchargé, j'ai donc essayer avec un CDN.
Ca ne change rien. Dans le doute aussi j'ai mis mon code directement dans ma page HTML. J'ai bien préciser dans mes <script> le type="text/javascript".

Voici le code

        <script type="text/javascript">
            $(document).ready(function(){
                alert("test");
            });
        </script>

Et le code pour importer jQuery :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Ce <script> se trouve dans mes balises <body> , j'avais essayer de les mettre a l'extérieur (donc dans mes balises <html> ), ça n'a rien changé.

11 réponses

Romain Chevallier
Réponse acceptée

le $ et jQuery c'est la même chose donc après tu dois avoir ton script apres ton include jquery le tout dans la balise head de ton code html.

<html>
  <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script type="text/javascript">
            $(document).ready(function(){
                alert("test");
            });
        </script>
  </head>
  <body>
  </body>
</html>
Lartak
Réponse acceptée

Le javascript de jQuery doit être appelé avant ton/tes scripts qui l'utilise, là tu as fait l'inverse, tu as mis le code et tu appelles le javascript de jQuery après.
Pour imager simplement la situation, tu mets la charrue avant les bœufs, tu coup la charrue ne risque pas d'avancer et c'est la même chose pour jQuery.

Digivia
Réponse acceptée

Salut,
En fait c'est même mieux de placer les scripts js en fin de page, juste avant la balise body. Ainsi, ta page web se charge en premier et apparaît plus rapidement. Dans tous les cas, ton JS ne se déclenchera que lorsque le DOM (en gros, les éléments de ta page web) sera chargé...
Seuls les css doivent être placés dans la balise head

Lartak

Bonjour.

sauf que ce qui est bizarre c'est que le $ qui est en cause permet d'attendre que jQuery soit bien chargé.

Non, tu fais erreur, c'est pour dire que tu veux utiliser jQuery, mais ça ne veut pas dire que ça écutera le code qu'une fois que jQuery sera bien chargé.
La syntaxe est plutôt celle-ci :

jQuery(document).ready(function($){
    alert('jQuery est bien chargé');
});

Si tu veux dire que tu charges le fichier de jQuery dans la balise body, tu fais erreur, il te faut plutôt le charger dans la balise head après tes chargements de fichiers CSS par exemple.

Laznet
Auteur

Un grand merci pour cette précision, en faite je me référais à ce qu'ils disent sur Openclassroom. Et ils disent qu'en utilisant ce code, ça permet d'attendre que l'arborescence soit chargé.

Laznet
Auteur

Re-bonsoir,

J'ai utilisé ton code, et dans la console on me dit maintenant que jQuery n'est pas défini.
Et cette fois-ci j'ai mis mes <script> dans le <header>.

Lartak

Je ne me rappelle pas t'avoir dit header mais plutôt head, c'est entre les balises headque l'on place tout ce qui est meta, les CSS, etc ..., et accessoirement le javascript.
Donc charges le javascript de jQuery entre les balises head et si tu a toujours un problème, montres nous tout ton code HTML qui se situe avant ta balise body.

Laznet
Auteur

@Lartak - Oui ! Je me suis trompé, j'avais mal lu.
J'ai donc mis mes <script> dans le head. Et ça ne fonctionne pas.

Lartak

Tu réponds partiellement à mon message, je t'avais dit aussi de nous montrer le code HTML qui se situe au dessus de la balise body si tu avais toujours l'erreur.

Laznet
Auteur

@Lartak - Oui désolé ^^, 

<html>
<head>
    <meta charset="UTF-8">
    <title>Accueil</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript">
        jQuery(document).ready(function($){
            alert('jQuery est bien chargé');
        });
    </script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <div id="test">
            Trigger the handler
        </div>
        <div id="button">
            Click here
        </div>
    </body>
</html>

Romain Chevallier - J'ai testé ton code, et ça fonctionne, j'ai bien une alert.
Et mon code est presque pareil. Donc là je comprend pas ^^.

Laznet
Auteur

Un grand merci à vous deux :D