Discussion :

[Vahia]

Bonjour à tous !

J'ai une page html qui contient 2 inputs non déclarés dans un formulaire (aucun formulaire dans la page). J'ai également un bouton déclaré sous forme de div.

Un addEventListener me permet d'appeler une fonction au clic sur le bouton.

Voici le contenu du fichier js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const bigFile = document.getElementById('bigFile').files[0]; // Le 1er input
const smallFile = document.getElementById('smallFile').files[0]; // Le 2e input
 
const button = document.getElementById('button'); // Le bouton
button.addEventListener('click', (e) => {
    e.preventDefault();
    ajout();
})
 
function ajout() {
    if (bigFile || smallFile) {
        if (!bigFile) {
            alert('Vous devez charger 2 fichiers image');
        }
        if (!smallFile) {
            alert('Vous devez charger 2 fichiers image');
        }
 
        const fdata = new FormData();
        fdata.append('imageUrlBig', bigFile);
        fdata.append('imageUrlSmall', smallFile);
        console.log(fdata);
 
        const head3 = {
            method: 'POST',
            body: fdata,
            headers: {'Authorization': `Bearer ${sessionStorage.token}`}
        }
 
        fetch('http://localhost:4000/api/caroussel/', head3)
            .then(reponse => {
                if (reponse.status == 201) {
                    alert('Nouvelles images ajoutées avec succès !')
                }
                else {
                    return reponse.json({message: "ça ne fonctionne pas"});
                }
            })
            .catch(e => {
                console.log("ça n'a pas marché...")
            })
    }
}

Ce qui se passe c'est qu'au clic, le fetch s'exécute bien (le back reçoit bien les fichiers) mais la page se recharge avant d'afficher l'alert et le fetch semble être re-exécuté car la console affiche "ça n'a pas marché..." après rechargement. Pourtant côté back je n'ai aucune erreur, tout a fonctionné correctement.
Comme vous pouvez le voir j'ai mis un e.preventDefault() sur le listener mais ça ne change rien.

Vous avez une idée de ce qui se passe ?
Merci d'avance pour votre aide !

[mathieu]

mettez l'appel à fetch en commentaire pour chercher d'où vient le rechargement.

[SpaceFrog]

Peut on voir le HTML du bouton c'est une balise a ou un div ?
Il semble que le preventDefaut ne fonctionne pas ?
Quelle est l'url finale ?

[domi65]

Bonjour
Si l'élement nommé "button" est un élément button<button>mon bouton</button> alors c'est normal que la page se recharge. C'est le comportement par défaut. Il faut insérer au début de la fonction Event.preventDefault();.
Cordialement.

[ProgElecT]

Salut

Par défaut <button>, si le type n'est pas précisé, est de type submit.
En définissant le type à <button type="button"> cela éviterait le problème.

[Vahia]

Merci à tous pour vos réponses !

Voici le code de mon bouton :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="ajout__files__butt" id="button">Enregistrer<br>les modifications</div>

donc à ma connaissance il n'y a pas de comportement automatique sur ce genre d'élément...

En plus, comme on peut le voir dans le code que j'ai posté dans mon premier post, dans le doute j'ai mis un e.preventDefault() dans le listener du bouton et malgré tout la page se recharge.

Autre élément de réponse, j'ai mis en commentaire l'ensemble du bloc fetch => pas de rechargement.
J'ai décommenté juste la ligne de la requête fetch avec l'url (les .then restent commentés) => pas de rechargement.
Ensuite j'ai juste ajouté .then(reponse => {console.log(reponse.status);}) => la page se recharge.
J'ai essayé aussi un .then( () => {alert('ok')}) => la page se recharge.

J'y comprends plus rien...

[domi65]

Un clic sur une div n'a en effet aucune raison de recharger la page.
Par contre, cette div utilisée comme bouton n'est pas du tout recommande pour l'accessibilité.

[Vahia]

Complètement d'accord avec toi mais en l'occurence il s'agit d'une page de gestion qui sera uniquement vue et utilisée par le propriétaire du site. Donc j'ai pas forcé sur l'accessibilité. 😁

[Loga7]

Bonjour, j'ai le même problème... Vous avez trouvé d'où ca venait ?

[Vahia]

Salut Loga7,
à ce jour je n'ai pas trouvé de solution. Je crois que ça restera en l'état...

[Doksuri]

il doit nous manque des infos...
il doit y avoir un autre code qui s'execute... (qui n'a rien a voir avec ton bouton)

as-tu essaye sur une page test, ou tu n'as QUE ce code ?

ps : attention : le .catch() d'un fetch() ne "catch" pas les erreurs http, une reponse 404 (ou 5XX) "valide" la promesse

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="go">fetch</div>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
document.getElementById('go').addEventListener('click', go);
 
function go() {
	fetch('https://placekitten.com/g/200/300')
  .then(res => {
  	document.body.append('fetch ok');
  })
  .catch(e => {
  console.log(e);
  });
}

ce code fonctionne comme voulu.. la page ne se recharge pas

[Toufik83]

Bonjour,

Je ne suis pas sûr, mais peut être que les fichiers serveurs sont sur la même racine/répertoire des fichiers clients, et que le serveur détecte des changements lors de la récupération de données et qu'il déclenche un rechargement en directe, comme c'est expliqué dans cette discussion de stackoverflow.

La dernière réponse contient un lien pour plus de détails...