Discussion :

[benoit256255]

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 Javascript :

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
 
// 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 !

[danielhagnoul]

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

[benoit256255]

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 PHP :

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
 
<?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));  
    }
?>

[NoSmoking]

Bonjour,

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 :

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

1
2
3
4
5
for(var unOuvrage of ensembleOuvrages){
    unOuvrage.addEventListener('click', function(evt){
        // ...
    }
}

[Nothus]

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.