Erreur 404 avec jQuery

17 février 2019 à 16:49:57

Bonjour,

Je rencontre un petit problème depuis 2-3 jours, je suis entrain de faire un petit site pour m'entraîner avec l'aide d'un cours, je suis censé m'aider de jQuery pour le rendre plus dynamique mais rien ne fonctionne, le problème c'est ce que je ne sais pas si ça vient de mon code ou alors d'un problème avec jQuery..

Voici mon code Javascript qui est censé faire bouger des éléments :

$(function() {
    
    var $mainMenuItems = $("#main-menu ul").children("li"),
        totalMainMenuItems = $mainMenuItems.length,
        openedIndex = -1,
        
    var init = function(){
        
        $mainMenuItems.children(".images").click(function(){
            
            var newIndex = $(this).parent().index(),
            $item = $mainMenuItems.eq(newIndex),
            $colorImage = $item.find(".color");
            
            $colorImage.animate({left:"0px"},250);
            $item.animate({width: "420px"},250);
            
            openedIndex = newIndex; 
            
            
        });
        
    };
    
    init(); 
});

Et voici comment j'insère jQuery dans ma page html :

<!DOCTYPE html>
<html>
    <head>
        <title>Top 5 des meilleures actrices</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="script.js"></script>
        <script src="jquery-3.3.1.min.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Limelight" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
    </head>

Je ne vous met pas le reste du temps, ça prendrait trop de place pour rien.

D'ailleurs lorsque j'essaye d'inspecter l'élément sur ma page html, dans Source je ne trouve pas mon fichier script.js, j'imagine que ça a un rapport avec ça..

Si quelqu'un peut m'aider, j'en serais très reconnaissant car c'est très frustrant de ne pas avancer, merci :)

EDIT : Je viens de capter que dans la console, il est affiché "Failed to load resource: the server responded with a status of 404 (Not Found)" pourtant j'ai bien pris le bon fichier..

-
Edité par Fizwizbiz 17 février 2019 à 21:24:21

"La vérité se trouve au fond d'un puits" Democrite

Lamecarlate

17 février 2019 à 21:16:20

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Problème jQuery)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Thomas D

18 février 2019 à 9:33:49

Bonjour,

Peut-on voir l'arborescence des fichiers de ton projet ? En l'état,tu dois avoir un fichier script.js et jquery-3.3.1.min.js au même niveau que ton fichier .html.

PS: charge la librairie jquery avant ton script.js.

lesjoiesducode / Les points-virgules en JavaScript

Fizwizbiz

18 février 2019 à 10:40:57

Bonjour, merci d'abord pour la réponse rapide.

Concernant l'arborescence des fichiers, tous mes fichiers sont dans un dossier nommé "Site Javascript", il y a le dossier "script.html", "script.js" et "style.css", ensuite un autre dossier "images" avec quelques images dedans, mais tout est bien dans le fichier au même niveau.

Sinon je ne pense pas que mon problème vient de jQuery, enfin je ne suis pas sûr, car lorsque j'inspecte l'élément de ma page html, dans l'onglet Sources, je ne trouve pas mon dossier script.js alors que sur d'anciens projets je peux le voir clairement..

De toute manière je peux recommencer le projet de zéro mais j'aimerai savoir d'où vient le problème au cas où que ça m'arrive de nouveau.

"La vérité se trouve au fond d'un puits" Democrite

Thomas D

18 février 2019 à 11:10:35

Fizwizbiz a écrit:

Concernant l'arborescence des fichiers, tous mes fichiers sont dans un dossier nommé "Site Javascript", il y a le dossier "script.html", "script.js" et "style.css", ensuite un autre dossier "images" avec quelques images dedans, mais tout est bien dans le fichier au même niveau.
Sinon je ne pense pas que mon problème vient de jQuery, enfin je ne suis pas sûr, car lorsque j'inspecte l'élément de ma page html, dans l'onglet Sources, je ne trouve pas mon dossier script.js alors que sur d'anciens projets je peux le voir clairement..

Attention, script.js, script.html et style.css doivent être des fichiers, et pas des dossiers !

lesjoiesducode / Les points-virgules en JavaScript

Fizwizbiz

18 février 2019 à 11:20:25

Oui désolé je me suis mal exprimé, ce sont bien des fichiers et non des dossiers.

Sinon même dans l'onglet Sources, en faisant Ctrl + p pour chercher un dossier je ne trouve pas mon script, pourtant tout a l'air normal et ce n'est pas Brackets qui ne fonctionne pas car je viens à l'instant de recréer un dossier pour tester du javascript avec succès..

EDIT : Je viens de relancer un fichier avec un script.js que j'ai crée il y a 20min et maintenant le fichier script.js ne se lance plus, il est introuvable dans le DOM, alors que je n'ai pas touché au dossier ni rien, c'est étrange cette histoire !

-
Edité par Fizwizbiz 18 février 2019 à 11:43:56

"La vérité se trouve au fond d'un puits" Democrite

Thomas D

18 février 2019 à 11:42:04

As-tu chargé la librairie jquery avant ton script personnel ? Ouvre la console de ton navigateur, et pas l'onglet "source". S'il y a une erreur dans ton script, il se peut que tu ne le vois pas dans l'onglet source.

Je suis sur mon téléphone et je n'ai pas en tête les onglets et paramètres des navigateurs. Peux-tu préciser le navigateur que tu utilises ?

lesjoiesducode / Les points-virgules en JavaScript

Mewen_bzh

18 février 2019 à 11:42:57

Pourrais-tu nous fournir un screenshot de ta structure de dossiers et fichiers stp ?

Je ne réponds pas aux messages privés.

Fizwizbiz

18 février 2019 à 11:54:12

Oui j'ai bien chargé jQuery avant mon script personnel. Voici des screens d'un peu de tout :

"La vérité se trouve au fond d'un puits" Democrite

Thomas D

18 février 2019 à 12:02:53

Et tu n'as pas de message d'erreur dans l'onglet console ?

lesjoiesducode / Les points-virgules en JavaScript

Mewen_bzh

18 février 2019 à 12:07:44

Et si tout cela venait simplement du fait que tu charges tes scripts dans le head et non en bas de page juste avant la fermeture du body comme le veut la norme ?

Si ton script essaye d'interagir avec des éléments avant que ces derniers ne soient créés dans le DOM cela ne fonctionnera pas.

Je ne réponds pas aux messages privés.

Fizwizbiz

18 février 2019 à 12:17:06

J'ai déjà essayé de mettre le script et jQuery à la fin de <body> mais rien n'y fait, je viens de mettre à jour Windows ainsi que Chrome et dans la console un nouveau message d'erreur apparaît :

"VM20:1047 WebSocket connection to 'ws://localhost:8125/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED"

Avec un petit message en dessous :

createWebSocket

VM20:1047

EDIT : En cliquant sur le lien VM20:1047, ça m'envoie vers un autre fichier avec une ligne de code, je l'ai rajouté dans mon fichier script.js, c'est " _ws = new WebSocket("ws://localhost:" + remoteWSPort);" et en rafraichissant la page, le fichier script.js apparait dans l'onglet "Sources", je n'ai absolument aucune idée de comment ça se fait, sur Internet j'ai vu que ça concernait un port qu'il fallait ouvrir..

-
Edité par Fizwizbiz 18 février 2019 à 12:45:49

"La vérité se trouve au fond d'un puits" Democrite