Table créée par code n'est pas trouvée comme noeud dans la nodeList

**clickandgo** · 09/11/2022, 14h03

Bonjour à tous,

Dans le code ci-dessous qui marche parfaitement et qui crée dynamiquement une table avec un bouton supprimer pour chaque ligne, il m'est ensuite impossible de faire une délégation sur la liste des boutons car la table ne figure pas dans la nodeList du dom et aucun de ses éléments n'est donc disponible pour un queryselectorAll par exemple...

Sauriez-vous me dire pourquoi ?

Merci d'avance

listeCategoriesDepenses.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
44
45
46
47
48
49
50
function listeCategoriesDepenses() {
 
    //On instancie XMLHttp request
    let xhr = new XMLHttpRequest()
 
    xhr.open('get', 'listeCategoriesDepenses.php')
 
    xhr.onreadystatechange = () => {
 
        if (xhr.readyState == 4 && xhr.status == 200) {
 
            //Si réponse on la convertit
            let categories = JSON.parse(xhr.response)
            //console.log(categories)
 
            //création du tableau dans la page
            const tableau = document.createElement('table')
            //Boucle sur l'objet categories JSON
            const listeCategories = categories.map((item)=> {
                //Affiche les éléments catégories en liste
                return `                 
                <tr>
                <td>${item.nomcategorie}</td> 
                <td><button class="btnSupprimerCategorie" data-idcategorie=${item.id} type="button">Effacer</button></td>             
                </tr>                   
                `
            })
            //console.log(listeCategories)
            tableau.innerHTML = `
            <thead>
            <tr><th colspan=2>Catégories Dépenses</tr></th>
            </thead>
            <tbody>${listeCategories.join(' ')}</tbody>`
 
            //Affichage du tableau            
            document.getElementById("listeCategoriesDepenses").appendChild(tableau)
 
        } else {
            //On gère les erreurs
            let erreur = xhr.response
            console.log("Erreur ! : " + erreur.message)
        }
    }
 
        //Envoi de la requête Ajax
        xhr.send()
 
}
 
listeCategoriesDepenses()

index.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
24
25
26
27
28
<?php
 
require_once 'ajoutcategoriedepenses.php';
require_once 'supprimercategoriedepenses.php';?>
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <link rel="stylesheet" href="/css/styles.css">
    <title>Document</title>
</head>
<body>
    <div id="listeCategoriesDepenses">
 
        <form action="" method="post">
            <label for="nomcategorie">Nom catégorie</label>
            <input type="text" name="nomcategorie" id="nomcategorie">
            <input type="submit" value="Ajouter" id="btnajoutcategorie" name="btnajoutcategorie">
        </form>
 
    </div>
    </body>
    <script type="text/javascript" src="js/listecategoriesdepenses.js"></script>
    <script type="text/javascript" src="js/supprimercategoriedepenses.js"></script>
</html>

supprimerCategorieDepense.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
window.onload = () => {
 
    const btnSupprimerCategorie = document.querySelectorAll("*")
    console.log(btnSupprimerCategorie)
 
 
    btnSupprimerCategorie.forEach((element)=>{
 
        element.addEventListener('click',(e)=>{
            //e.preventDefault()
 
 
    })
    })
 
 
    // let xhr = new XMLHttpRequest();
    // xhr.open("POST", "supprimercategoriedepenses.php");
    // xhr.onreadystatechange=(e)=>{
    //     if(xhr.readyState==4 &&xhr.status==200 ){
    //         let reponse=xhr.response
    //     }
    // }
}

**SpaceFrog** · 09/11/2022, 14h38

c'est une question de chronologie.
Tu ne peux affecter les events aux objets que si il existent, donc après qu'ils aient été ajoutés à un conteneur sur la page.

Deux possibilités, attribuer les events après le chargement par ajax.
Attribuer les events par délégation depuis le parent en recherchant, au moment du click que prendra le parent, les enfants

**clickandgo** · 09/11/2022, 14h52

Bonjour et merci pour cette réponse

Je ne comprends pas, le html de la table est bien visible dans l'inspecteur et la fenêtre du navigateur ce qui suppose que tout a été chargé dans la div adéquate (je l'ai rajoutée maintenant dans index.php et l'ai ciblée correctement...)
La table devrait apparaitre dans le nodeList du DOM non ? surtout que j'ai rajouté un window.onload pour être sûr que la page est complétement chargée...

**mathieu** · 09/11/2022, 15h14

l'évènement "onload" est lancé quand le contenu initial est chargé. l'évènement n'attend pas la création d'autres éléments en javascript.

**clickandgo** · 11/11/2022, 11h33

Bonjour à tous,

Donc, après test, si je pointe sur la div qui contient la table dont les lignes sont créées à la volée, les lignes ne sont toujours pas retrouvées ni sélectionnables...

Je sèche quant à la manière de procéder, cela voudrait dire que l'on ne peut cibler un élément qui vient d'être créé ?

A ce moment là comment remplir ces rows après un appel Ajax ?

**mathieu** · 11/11/2022, 11h47

SpaceFrog a répondu un peu plus haut, montrez nous ce que vous avez essayé.

Envoyé par SpaceFrog

Deux possibilités, attribuer les events après le chargement par ajax.
Attribuer les events par délégation depuis le parent en recherchant, au moment du click que prendra le parent, les enfants

**clickandgo** · 11/11/2022, 16h16

Voici le code aujourd'hui

Merci d'avance

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
44
45
46
47
48
49
50
51
52
function listeCategoriesDepenses() {
 
    //On instancie XMLHttp request
    let xhr = new XMLHttpRequest()
 
    xhr.open('get', 'listeCategoriesDepenses.php')
 
    xhr.onreadystatechange = () => {
 
        if (xhr.readyState == 4 && xhr.status == 200) {
 
            //Si réponse on la convertit
            let categories = JSON.parse(xhr.response)
            //console.log(categories)
 
            //création du tableau dans la page
            const tableau = document.createElement('table', id="tblCategoriesDepenses")
            //Boucle sur l'objet categories JSON
            const listeCategories = categories.map((item)=> {
                //Affiche les éléments catégories en liste
                return `                 
                <tr class="ligneCategorie">
                <td>${item.nomcategorie}</td> 
                <td><button class="btnSupprimerCategorie" name="idcategorie" value=${item.id} type="submit">Effacer</button></td>             
                </tr>                   
                `
            })
 
            tableau.innerHTML = `
            <thead>
            <tr><th colspan=2>Catégories Dépenses</tr></th>            
            </thead>
            <tbody>${listeCategories.join(' ')}</tbody>`
 
            //Affichage du tableau            
            document.getElementById("categoriesdepenses").appendChild(tableau)
            //let nbRows= document.getElementById('#tblCategoriesDepenses').rows.length
            //console.log(nbRows)
 
        } else {
            //On gère les erreurs
            let erreur = xhr.response
            console.log("Erreur ! : " + erreur.message)
        }
    }
 
        //Envoi de la requête Ajax
        xhr.send()
 
}
 
listeCategoriesDepenses()

**mathieu** · 11/11/2022, 20h00

le 1er souci est au niveau de createElement('table', id="tblCategoriesDepenses"), ce n'est pas le bon endroit pour indiquer un identifiant mais plutot avec "setAttribute" :
https://developer.mozilla.org/fr/doc.../createElement
https://developer.mozilla.org/fr/doc...t/setAttribute

le 2e souci est avec getElementById('#tblCategoriesDepenses'), il n'y a pas besoin de "#" avec cette méthode.

mais au final, il n'y a pas besoin de passer par tout ça parce que vous avez déjà la variable "tableau" au début du code et cette variable est liée à la balise dans le code html.
donc vous pouvez directement récupérer les boutons du tableau en faisant tableau.getElementsByClassName("btnSupprimerCategorie").

**clickandgo** · 14/11/2022, 13h53

Bonjour et merci beaucoup pour vos réponses cependant, voilà que j'ai l'erreur "btnSupprimerCategorie.forEach is not a function" dans le code ci-dessous, pourtant forEach peut être utilisée sur la nodeList depuis 2016 me semble-t'il ???
(La nodelist s'affiche bien dans l'inspecteur maintenant)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
    const btnSupprimerCategorie = document.getElementsByClassName("btnSupprimercategorie")
    console.log(btnSupprimerCategorie)
 
    btnSupprimerCategorie.forEach((element) =>{
 
        element.addEventListener('click',(e)=>{
            e.preventDefault()
 
            alert("coucou")
    })
    })

**mathieu** · 14/11/2022, 14h15

"forEach" fonctionne seulement sur les tableaux donc pour transformer la variable faites cela :

Code javascript :

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

[...btnSupprimerCategorie].forEach(

**clickandgo** · 14/11/2022, 15h40

Rebonjour

Il n'accepte pas en me disant

Uncaught SyntaxError: expected expression

et en soulignant l'expression.

De ce que j'ai lu, forEach() supporterait la nodeList maintenant et ce, depuis 2016 ... Donc je comprends plus rien !!!

**Dave Hiock** · 14/11/2022, 17h48

\ô/

De ce que j'ai lu, forEach() supporterait la nodeList maintenant et ce, depuis 2016

oui mais, getElementsByClassName retourne une HTMLCollection et non une NodeList.

Pour avoir une NodeList tu peux toujours utiliser

Code :

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

document.querySelectorAll(".btnSupprimercategorie"); // ne pas oublier le point devant le nom de la classe

**clickandgo** · 14/11/2022, 18h58

Je louais déjà QuerySelectorAll croyant que c'était la solution en effet mais j'avais déjà essayé et cela me renvoie la nodelist vide et ignore mon preventDefault()... Désespérant...

Que faire donc ?

Table créée par code n'est pas trouvée comme noeud dans la nodeList

JavaScript

Discussions similaires

Partager

Partager