Partage
  • Partager sur Facebook
  • Partager sur Twitter

Uncaught TypeError: Cannot read property 'querySel

Erreur jQuery

Sujet résolu
18 août 2019 à 17:14:54

Bonsoir,

J'ai une énorme erreur jQuery qui bloque la plupart de mes actions. Voici ma console :

Erreurs

Je n'ai pas touché au document jquery, je ne comprends donc pas pourquoi il y a erreur.

Voici l'appel des scripts js de mon site :

<script type="text/javascript" src="https://unpkg.com/aos@^2.3.4"></script>
        <script type="text/javascript" src="https://unpkg.com/jquery@%5E3.4.1"></script>
        <script src="{% static 'users/jquery.waypoints.min.js' %}"></script>
        <script src="{% static 'users/infinite.min.js' %}"></script>
        <script type="text/javascript" src="https://unpkg.com/popper.js@%5E1.15.0/dist/umd/popper.min.js"></script>
        <script type="text/javascript" src="https://unpkg.com/bootstrap@%5E4.3.1"></script>
        <!-- Optional Vendor Scripts (Remove the plugin script here and comment initializer script out of index.js if site does not use that feature) -->
        <!-- AOS (Animate On Scroll - animates elements into view while scrolling down) -->
        <script type="text/javascript" src="https://unpkg.com/aos@%5E2.3.4/dist/aos.js"></script>
        <!-- Clipboard (copies content from browser into OS clipboard) -->
        <script type="text/javascript" src="https://unpkg.com/clipboard@%5E2.0.4/dist/clipboard.min.js"></script>
        <!-- Fancybox (handles image and video lightbox and galleries) -->
        <script type="text/javascript" src="https://unpkg.com/@fancyapps/fancybox@3.5.2/dist/jquery.fancybox.min.js"></script>
        <!-- Flatpickr (calendar/date/time picker UI) -->
        <script type="text/javascript" src="https://unpkg.com/flatpickr@%5E4.5.7/dist/flatpickr.min.js"></script>
        <!-- Flickity (handles touch enabled carousels and sliders) -->
        <script type="text/javascript" src="https://unpkg.com/flickity@%5E2.2.0/dist/flickity.pkgd.min.js"></script>
        <!-- Ion rangeSlider (flexible and pretty range slider elements) -->
        <script type="text/javascript" src="https://unpkg.com/ion-rangeslider@%5E2.3.0/js/ion.rangeSlider.js"></script>
        <!-- Isotope (masonry layouts and filtering) -->
        <script type="text/javascript" src="https://unpkg.com/isotope-layout@%5E3.0.6/dist/isotope.pkgd.min.js"></script>
        <!-- jarallax (parallax effect and video backgrounds) -->
        <script type="text/javascript" src="https://unpkg.com/jarallax@%5E1.10.7/dist/jarallax.min.js"></script>
        <script type="text/javascript" src="https://unpkg.com/jarallax@%5E1.10.7/dist/jarallax-video.min.js"></script>
        <script type="text/javascript" src="https://unpkg.com/jarallax@%5E1.10.7/dist/jarallax-element.min.js"></script>
        <!-- jQuery Countdown (displays countdown text to a specified date) -->
        <script type="text/javascript" src="https://unpkg.com/jquery-countdown@%5E2.2.0/dist/jquery.countdown.min.js"></script>
        <!-- jQuery smartWizard facilitates steppable wizard content -->
        <script type="text/javascript" src="https://unpkg.com/smartwizard@%5E4.3.1/dist/js/jquery.smartWizard.js"></script>
        <!-- Plyr (unified player for Video, Audio, Vimeo and Youtube) -->
        <script type="text/javascript" src="https://unpkg.com/plyr@%5E3.5.4/dist/plyr.polyfilled.min.js"></script>
        <!-- Prism (displays formatted code boxes) -->
        <script type="text/javascript" src="https://unpkg.com/prismjs@%5E1.16.0/prism.js"></script>
        <!-- ScrollMonitor (manages events for elements scrolling in and out of view) -->
        <script type="text/javascript" src="https://unpkg.com/scrollmonitor@%5E1.2.4/scrollMonitor.js"></script>
        <!-- Smooth scroll (animation to links in-page)-->
        <script type="text/javascript" src="https://unpkg.com/smooth-scroll@%5E16.0.3/dist/smooth-scroll.polyfills.min.js"></script>
        <!-- TwitterFetcher (displays a feed of tweets from a specified account)-->
        <script type="text/javascript" src="https://unpkg.com/twitter-fetcher@%5E18.0.2/js/twitterFetcher_min.js"></script>
        <!-- Typed text (animated typing effect)-->
        <script type="text/javascript" src="https://unpkg.com/typed.js@%5E2.0.9/lib/typed.min.js"></script>
        <!-- Required theme scripts (Do not remove) -->
        <script type="text/javascript" src="{% static 'users/main.js' %}"></script>

Merci de votre aide, cordialement,

Louis Grange

-
Edité par LoulouGrange 18 août 2019 à 17:16:01

  • Partager sur Facebook
  • Partager sur Twitter

Je suis là ;)

19 août 2019 à 10:42:31

Bonjour,

Je n'en suis pas sûr à 100% mais il semblerait que l'erreur vienne de ton script main.js. Dans la console, le message en jaune, tu as:

"at HTMLDocument.<anonymous> (http://localhost:8000/static/users/main.js:1175:40)"

L'erreur se trouverait donc dans main.js à la ligne 1175 au 40ème caractère.

  • Partager sur Facebook
  • Partager sur Twitter

᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼





᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼






























































































































































22 août 2019 à 20:32:05

Bonsoir,

Non, l'erreur ne viens pas de là, en fait je pense que c'est une erreur générale qui provient du placement de mes scripts (<script></script>) pas dans le bon ordre...je ne sais pas trop.

J'ai cherché ton erreur mais ceci semble peu probable vu que le même script ne renvoie pas d'erreur sur un autre serveur.

  • Partager sur Facebook
  • Partager sur Twitter

Je suis là ;)

Anonyme
23 août 2019 à 7:09:22

Le problème vient soit de DropdownGrid soit de ta manière de l'initialiser. Il nous faudrait le code correspondant.
  • Partager sur Facebook
  • Partager sur Twitter
23 août 2019 à 21:39:47

Salut,

déjà, contrairement à se qui est dit, cela ne peut pas venir de tes <script> car document.querySelector (si c'est bien ça dont tu parles ? :,) ) est une fonctionnalité incluse dans Javascript (je le sais car je l'utilise) et non jQuery ;)

A bientôt :)

  • Partager sur Facebook
  • Partager sur Twitter
27 août 2019 à 12:34:31

"déjà, contrairement à se qui est dit, cela ne peut pas venir de tes <script> car document.querySelector (si c'est bien ça dont tu parles ? :,) ) est une fonctionnalité incluse dans Javascript (je le sais car je l'utilise) et non jQuery"

D'après ce que j'ai lu, il parle bien de la bibliothèque JQuery, et non pas la méthode JavaScript.

Pour t'assurer que le problème ne vient pas de l'ordre des scripts, du peut mettre JQuery en premier, vu qu'il ne demande aucune dépendances. Tu peux aussi utiliser onload pour "démarrer" ton JS au chargement entier de la page. Ainsi, l'ordre des scripts n'aura aucune importance, ils seront tous chargés.

  • Partager sur Facebook
  • Partager sur Twitter

᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼





᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼






























































































































































28 août 2019 à 8:11:06

Ah, j’avais pas qu’un avait pareil en jQuery x)

Désolé :(

  • Partager sur Facebook
  • Partager sur Twitter
31 août 2019 à 17:23:50

Bonjour,

Merci de vos réponses !

@babounesmith, tu parles de l'attribut html onload() ? Si c'est le cas je ne vois pas comment l'utiliser ici...possible de développer ?

Merci à tous pour votre dévouement ;)

  • Partager sur Facebook
  • Partager sur Twitter

Je suis là ;)

16 septembre 2019 à 14:09:22

Désolé, je ne pouvais plus me connecter à mon compte.

Dans le cas où tu n'aurais toujours pas la solution, tu peux faire:

Javascript pur:

<!-- tu place l'attribut onload sur le body (et nul part ailleurs) puis tu crée une fonction avec le même nom. -->
<body onload="myFunction()"> 

OU Javascript pur 2:

window.onload = function () {
    // Code ici.
}

OU JQuery:

$(function() {
    // Code.
});

Il n'y a pas de réel différence entre chaque méthode bien que je te recommande la seconde avec du JavaScript pur.

  • Partager sur Facebook
  • Partager sur Twitter

᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼





᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼






























































































































































Anonyme
16 septembre 2019 à 14:18:47

Aucune différence entre load et DOMContentLoaded ?? Ben voyons.

Sinon personne n'a pensé à regarder la stack (à part moi) ? L'erreur vient de DropdownGrid.getContentElementet on ne sait toujours pas comment c'est appelé, ni implémenté.

document est natif et (AFAIK) toujours disponible donc je ne sais même pas pourquoi vous parlez de jQuery ou d'ordre des scripts.

Je redemande donc une dernière fois : que contient DropdownGrid.getContentElementet comment est-ce appelé ?

  • Partager sur Facebook
  • Partager sur Twitter
1 octobre 2019 à 12:01:53

"Aucune différence entre load et DOMContentLoaded ?? Ben voyons."

J'ai pourtant dit "Il n'y a pas de réel différence" et non pas "Il n'y a aucune différence". DOMContentLoad est déclenché lorsque la structure de la page est entièrement chargé. load est déclenché après lorsque les images, feuilles de styles et iframes sont chargés.

"Sinon personne n'a pensé à regarder la stack (à part moi) ? L'erreur vient de DropdownGrid.getContentElementet on ne sait toujours pas comment c'est appelé, ni implémenté."

Non tu n'est pas le seul. DropdownGrid.getContentElementet est contenu dans le fichier main.js et l'erreur vient de ce fichier, tout comme je l'ai déclaré plus haut.

"document est natif et (AFAIK) toujours disponible donc je ne sais même pas pourquoi vous parlez de jQuery ou d'ordre des scripts."

Nous ne connaissons pas le fonctionnement du script. Si DropdownGrid.getContentElementet utilise un élément du DOM où un autre script pour quelque raison que ce soit (une variable qui passe de null à un élément HTML par exemple), cela peut causer l'erreur.

C'est bien aussi de lire les messages.

  • Partager sur Facebook
  • Partager sur Twitter

᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼





᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼