Comment bien utiliser la fonction preventDefault()

Version imprimable

Bonjour à tous,

Je suis dans le dernier droit de mon cours HTML, CSS, PHP et maintenant JavaScript

Je suis dans la période de mon 3e travail pratique...

La matière nous est présenté un peu bizarrement, donc j'ai de la misère avec certain concept...

Mise en situation :

On doit afficher la liste des livres qui ce trouve dans un fichier txt. (Cette section ça va) sous forme d'une liste avec un lien vers un afficher.php

En cliquant sur le lien, les différents champs de notre formulaire doivent se remplir automatiquement car l'information est retournée du fichier afficher.php

En essayant de mettre la fct prevent.default à différent endroit, je ne suis pas capable de rester sur ma page en cours et afficher l’information avec la fct console.log() genre pour tester ce que je suis entrains de faire....
Voir ligne 27 du

Code:

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
 
// Cette fonction tout va bien mais je voulais vous la montrer pour éclaircir le contexte...
function listageDesOuvrages() {     
    // La section pour la liste des titres de chacuns des ouvrages sera.
    const liste = document.querySelector('#liste-ouvrages');
 
    // Pour faire afficher la liste des ouvrages
    fetch('liste.php')
        .then(function(contenu) {     
        // Retourne l'ensemble avec ses sous ensembles des ouvrages      
        return contenu.json(); 
    })            
        .then(function(listeOuvrages) {  
        // Ouvrage correspond à un sous ensemble de l'ensemble
        listeOuvrages.forEach(function (ouvrage){
            liste.innerHTML += "<li><a href='afficher.php?id="+ouvrage[0]+"'>" + ouvrage[1] + "</a></li>";
        });
    });
}
 
function affichageUnOuvrage(){
    const ensembleOuvrages = document.querySelectorAll('#liste-ouvrages li a'); 
    // faire des variables pour stocker l'informatino venant du json dans le formulaire
 
    for(var unOuvrage of ensembleOuvrages){
        unOuvrage.addEventListener('click', function(evt){
           evt.preventDefault(); //Cette fct permet de rester sur la page initiale
            fetch(unOuvrage.href)
                .then(function (contenu){                    
                // Retourne le sous ensemble de l'ouvrage sélectionner          
                return contenu.json();
            })
                .then(function (listeOuvrage){
                listeOuvrage.forEach(function (ouvrage){
                    console.log(ouvrage[0]);
                    // faire afficher le contenu de l'ouvrage sélectionner;
                });
            });
        });
    }
}

J'imagine qu'on a de bon tutoriel pour m'aider à bien saisir les concepts de base de JS

Merci et bon dimanche à tous !

26/11/2017, 23h15
danielhagnoul

:salut:

Il bloque l'action par défaut, ici l'appel de "afficher.php" lors du clic sur le lien.

Lire : https://developer.mozilla.org/fr/doc...preventDefault

Bonjour Daniel,

Merci pour la réponse....

Je comprends le but de la fct preventDefault mais malgré ca je me dirige vers le fichier afficher.php au lieu de rester sur index.html et de jouer avec l'information retourner de afficher.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<?php    
    if ($_SERVER['REQUEST_METHOD'] == 'GET') {
        $id = $_GET['id'];        
        $listeOuvrages = array_chunk(array_map('rtrim', file('./biblio.txt')), 11);        
 
        //$listeRetourner = []; // Tableau double dimensions de la liste retourner
 
        foreach($listeOuvrages as $ouvrage){
            // lorsqu'on trouve le id, on insere ces valeurs dans un tableau qu'on ajoute au tableau double dimensions
            if ($ouvrage[0] === $id){
                $ouvrageEncours = [ 'id' => $ouvrage[0], 'titre' => $ouvrage[1], 'auteur' => $ouvrage[2], 
                                    'annee' => $ouvrage[3], 'maison' => $ouvrage[4], 'version' => $ouvrage[5],       
                                    'sourceInfo' => $ouvrage[6], 'sourceImage' => $ouvrage[7], 'type' => $ouvrage[8],
                                    'typeAutre' => $ouvrage[9]
                                ];
 
                $listeRetourner [] = $ouvrageEncours; 
            }
        }
        print(json_encode($listeRetourner));  
    }
?>

27/11/2017, 16h23
NoSmoking
Bonjour,

Citation:

Je comprends le but de la fct preventDefault mais malgré ca je me dirige vers le fichier afficher.php au lieu de rester sur index.html

cela signifie qu'il doit y avoir une erreur dans ton script et que la fonction n'est donc pas exécutée.

Pour voir cela F12 pour afficher la console et voir si il y a des erreurs.

Une question que l'on peut se poser c'est pourquoi utiliser des éléments <a> dont ce n'est pas la vocation.

Une deuxième question est pourquoi ne pas affecter l'action lors de la création des éléments, mieux même, mettre l'écouteur sur le conteneur soit ta <ul>.

Enfin une remarque, j'entrevois un soucis dans ta boucle :
Code:

1 2 3 4 5 for(var unOuvrage of ensembleOuvrages){ unOuvrage.addEventListener('click', function(evt){ // ... } }
28/11/2017, 14h57
Nothus

Citation:

Envoyé par NoSmoking

Une question que l'on peut se poser c'est pourquoi utiliser des éléments <a> dont ce n'est pas la vocation.

Bonjour NoSmoking,

Pour la question de l'accessibilité, en soit l'utilisation des balises "a" n'est pas condamnable - notamment pour les liseuses. Ainsi dans le cadre d'une utilisation où JS est désactivé, la ressource peut-être dans certains cas visibles avec le comportement normal et attendu d'une balise "a" (certes dans cet exemple ce n'est pas le cas, mais peut-être que leur prof a voulu "cet esprit").

Mais vous auriez raison de dire que je chipote... :)

Bonne journée,

Julien.