Uncaught ReferenceError : $ n'est pas défini ?

Question

Comment se fait-il que ce code jette un

Uncaught ReferenceError : $ n'est pas défini

alors que tout allait bien avant ?

$(document).ready(function() {
    $('#tabs > ul').tabs({ fx: { opacity: 'toggle' } });
    $('#featuredvid > ul').tabs();
});

Les résultats dans les onglets ne se ferment plus.

jQuery est référencé dans l'en-tête :

<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/sprinkle.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-ui-personalized-1.5.2.packed.js"></script>

Answer 1

Vous devriez mettre les références aux scripts jquery en premier.

<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery-ui-personalized-1.5.2.packed.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/sprinkle.js"></script>

Answer 2

Vous appelez la fonction ready avant que le JavaScript de jQuery ne soit inclus. Référencez d'abord jQuery.

Answer 3

C'est ce qui a résolu le problème pour moi. Au départ, je suis allé sur Google et j'ai copié-collé l'extrait de code suggéré pour jQuery sur leur page CDN :

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

L'extrait ne comprend pas l'élément HTTP: ou HTTPS: dans le src mais mon navigateur, FireFox, en avait besoin et je l'ai donc changé en : edit : cela a fonctionné pour moi avec Google Chrome également

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Puis ça a marché.

Answer 4

Si votre script personnalisé est chargé avant que le plugin jQuery soit chargé dans le navigateur, ce type de problème peut se produire. Donc, gardez toujours votre propre code JavaScript ou jQuery après avoir appelé le plugin jQuery donc la solution pour cela est :

Ajoutez d'abord le lien vers le fichier jQuery hébergé sur GoogleApis ou un fichier jQuery local que vous allez télécharger à partir de http://jquery.com/download/ et l'héberger sur votre serveur :

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

ou tout autre plugin pour jQuery. Ensuite, mettez votre lien ou code de fichier script personnalisé :

<script src="js/custom.js" type="text/javascript"></script>

Answer 5

Ok, mon problème était différent - c'était Sécurité des documents modèle en Chrome .

En regardant les réponses ici, il était évident que je ne chargeais pas mes fichiers jquery avant d'appeler la fonction $(document).ready() etc. Cependant, ils étaient tous dans les positions correctes.

Dans mon cas, c'était parce que j'accédais au contenu via une connexion HTTPS sécurisée, alors que la page essayait de télécharger les données hébergées par le CDN depuis google, etc. La solution consistait à les stocker localement et à les inclure directement plutôt qu'à partir du CDN à chaque fois.

Modifier : L'autre façon de procéder consiste à établir un lien vers tous les éléments hébergés par le CDN en tant que https:// plutôt que http:// - le modèle ne se plaint alors pas.