web-dev-qa-db-fra.com

Uncaught ReferenceError: $ n'est pas défini

Je reçois ce message d'erreur lorsque j'essaie de créer un curseur d'image JQuery. 

Uncaught ReferenceError: $ n'est pas défini

Voici mon nouveau code (NOTE: j'ai déplacé le script vers la page, cela a été suggéré par Adobe.):

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Green Cold-Formed Steel | Home</title>
<style type="text/css">

body,td,th {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
    color: #000;
    text-align: left;
}
body {
    background-color: #999;
}
a:link {
    color: #999;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #060;
}
a:hover {
    text-decoration: underline;
    color: #FFF;
}
a:active {
    text-decoration: none;
}
h1 {
    font-size: 14px;
    color: #060;
}
h2 {
    font-size: 12px;
    color: #999;
}
h3 {
    font-size: 9px;
    color: #FFF;
}
#next {
    background-image: url(Assets/slideshow/r_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: right;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slideshowwrapper {
    display: block;
    height: 500px;
    width: 1000px;
    margin: auto;
}
#container {
    background-color: #FFC;
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: auto;
}
#prev {
    background-image: url(Assets/slideshow/L_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: left;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slider {
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: hidden;
    position: absolute;
}
#NavBar {
    display: block;
    height: 50px;
    width: auto;
    position: relative;
    padding-bottom: 5px;
    float: none;
    vertical-align: middle;
}
</style>
</head>

<body bgcolor="#999999" text="#000000">

<table width="100%" height="583" border="0" cellspacing="0" cellpadding="0px">
  <tr>
    <th height="132" align="left" scope="col">&nbsp;</th>
    <th scope="col"><div class="spacer" id="spacer"></div>
      <div class="Header" id="header"><a href="index.html"><img src="Assets/Logo/GFCS_Logo_NoBckgnd.png" width="288" height="108" alt="GCFS"></a></div>
    <hr></th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <th width="5%" align="left" scope="col">&nbsp;</th>
    <td width="85%" align="left" valign="top" scope="col">
    <div class="Navigation Bar" id="NavBar"><img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Home"> <img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Solutions"> <img src="Assets/navigation/navbutton_down.png" width="100" height="50" alt="navi_down"></div>

    <div id="slideshowwrapper">
      <div id="container">
        <div class="controller" id="prev"></div>
        <div id="slider">
            <img src="Assets/slideshow/hyatt_apts.png" width="1000" height="500" alt=           "Hyatt Apartments">
            <img src="Assets/slideshow/mccommas.png" width="1000" height="500" alt="McCommas">
            <img src="Assets/slideshow/park_4200.png" width="1000" height="500" alt="Park 4200">
            <img src="Assets/slideshow/quail_run.png" width="1000" height="500" alt="Quail Run">
            <img src="Assets/slideshow/roofdale.png" width="1000" height="500" alt="Roofdale Roof">
            <img src="Assets/slideshow/tri_truss.png" width="1000" height="500"> </div>
        <div class="controller" id="next"></div>
      </div>
    </div></td>
    <th width="10%" scope="col">&nbsp;</th>
  </tr>
</table>
<p>&nbsp;</p>
<script type="text/javascript" src="JS/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="JS/jquery.cycle.all.js"></script>
<script>
$(function(){
        $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 

        next:   '#next', 
        prev:   '#prev' 
    });
});
</script>
</body>
</html>

Le chemin d'accès au dossier JS de mon site Web (localement) ressemble à ceci: C:\Utilisateurs\Andrew\Desktop\GCFS\JS

Je suis nouveau dans le monde du codage, mais ce que j'essaie de réaliser est assez simple. Autant que je sache, je n'ai pas besoin d'avoir une fonction prête et le javascript devrait fonctionner automatiquement. Merci pour votre aide! 

De commentaire

Quand j'ai essayé cela a aussi échoué

<title>Green Cold-Formed Steel | Home</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="JS/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
 $(function() {  
   $('#slider').cycle({ fx: 'scrollHorz', speed: 'fast', next: '#next', prev: '#prev' });
}); 
</script>
javascriptjqueryimagereferenceerror
8
MasterFuel

La solution:

1) Utilisez Google CDN pour charger jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

2) Pour autant que je sache, Cycle Plugin est compatible avec jQuery v1.5-v1.7 car la plupart des méthodes étaient obsolètes dans jQuery 1.8+. C'est la raison pour laquelle j'ai utilisé la version 1.5 de Google CDN jquery au point 1. La plupart des exemples de cycle plugin utilisent jquery 1.5.

3) Effacez le cache de votre navigateur, c’est le principal coupable la plupart du temps.

4) Veuillez vérifier le chargement de jquery en utilisant le code ci-dessous

if(typeof jQuery!=='undefined'){
    console.log('jQuery Loaded');
}
else{
    console.log('not loaded yet');
}

Major Edit:

La raison de l'erreur est assez simple:

Vous avez appelé la méthode du cycle avant le chargement de la requête.

call cycle plugin sur DOM ready .. 

$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 

        next:   '#next', 
        prev:   '#prev' 
    });  
});
11
writeToBhuwan

2 questions.

On dirait que votre jQuery n'a pas été chargé correctement.

Vous voyez généralement cette erreur

Uncaught ReferenceError:$ is not defined

quand jQuery n'était pas correctement inclus sur votre page.

Essayez d’utiliser jQuery à partir de CDN et cela devrait résoudre votre problème.

Remplacer 

<script src="JS/jquery-1.10.1.min.js"></script>

avec celui de cdn

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

NOTE: si vous testez depuis un système de fichiers, vous devez ajouter le http: à l'URL ci-dessus, sinon cela échouera.

Ensuite, votre fichier de script est avant la HTML. Il faut donc contenir le code dans le gestionnaire DOM Ready.

$(function() {
    $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 
        next:   '#next', 
        prev:   '#prev' 
    });
});

Autant que je sache, le «curseur» a été référencé lors de la création de l'identifiant div.

Non ce n'est pas. Si votre script a été inclus juste avant le corps, vous ne pouvez pas le faire figurer dans le gestionnaire Ready. Mais dans votre cas, il est présent dans la tête. Ainsi, lorsque le script commence à exécuter, cet élément particulier n'est toujours pas présent dans la variable DOM.

Vérifiez Fiddle

9
Sushanth --

Il pourrait y avoir deux problèmes:

1) JQuery n’a peut-être pas été chargé correctement. Vous pouvez le tester en utilisant Chrome. Saisissez $ ou jQuery pour vérifier s'il est chargé correctement .Chrome Console

2) Ceci est basé sur mon expérience dans certains JQuery.js qui auraient été groupés avec d'autres bibliothèques JS, où $ ne sera pas supporté et vous êtes obligé d'utiliser jQuery au lieu de $ Consultez la ligne ci-dessous dans le fichier js fichier que vous avez chargé dans votre projet.

window.jQuery = window.$ = jQuery;

Je vois cela en utilisant http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js n'a pas fonctionné pour moi mais j'ai utilisé http: // code .jquery.com/jquery-1.7.2.min.js

Ci-dessous est la seule partie de votre code que j'ai modifiée et qui a bien fonctionné pour moi.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
3
Raghav

En complément. Si vous utilisez $ (Jquery) dans votre fichier .js. Logiquement, toutes les bibliothèques ou tous les frameworks doivent être avant ce fichier .js.

<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="app.js"></script>
1
Sergii Lisnychyi

J'avais ce problème, mais la cause était très différente des scénarios décrits ci-dessus . Mon site fonctionnait partout sauf sur mon ancien Android (2.2) . com CDN, donc il ne chargeait pas JQuery. Le correctif consistait à charger les ressources JQuery à partir du CDN Google https (à l'aide des URL nommées par d'autres personnes ci-dessus).

0
Frank Carnovale