Récupérer des propriétés dans une Modale

**JmichelF** · 22/04/2024, 08h58

Bonjour
Pour commencer une courte présentation.
Je suis enseignant, mais pas en informatique. J'ai quelques notions de programmation car j'en ai fait une peu a titre personnel mais aussi dans le cadre professionnel. Cependant, je reste un autodidacte dont mon code n'est sans doute pas tres propre aux yeux d'un programmeur.
Je développe une appli pour faciliter mon travail. Elle est base sur une base de données MySQL que je gère ensuite avec des page HTML en PHP.
Pour cette partie de l'exercice, je m'en sort assez bien, d'ailleurs mon appli fonctionne correctement, je peux consulter, modifier, ajouter ou supprimer des données sans problème.
J'ai même fait un peu de CSS pour que çà ressemble un peu a quelque chose même si pour moi le CSS reste un langage obscur.
A ce stade, je souhaite améliorer certain points de l'interface, et notamment la confirmation des suppression et des modification. Comme cela se passe cÃ´tÃ© client, je me tourne vers Javasript.
Ayant quelque notion mais très peu, j'ai par exemple fait en sorte que certains éléments s'affiche ou pas en cliquant sur des boutons. J'ai très bien compris le principe de récupération de propriétés des éléments avec GetElement ou QuerySelevot et la gestion des événements avec addEventListener.

Et c'est la que j'en viens a mon problème.
Sur l'une de mes pages, j'affiche les données venant de ma BDD en les mettant dans un tableau (balise table). C'est le PHP qui crée les TR du tableau avec une boucle Foreach.
Sur chaque ligne, je genere un bouton qui permet de supprimer l'enregistrement correspondant (au clic sur le bouton, envoie du formulaire qui exécute un script PHP dans une autre page). Tout cela fonctionne très bien sauf que je voudrais Ã* prÃ©sent que l'utilisateur confirme la suppression (idéalement que voudrais avoir dans la boite de dialogue un rappel des ce qui est sur le point d'etre supprime) en cliquant sur un bouton confirmer ou en annulant.
Malheureusement, j'ai essayer de faire des getElement ou des querySelector en utilisant l'iD du bouton, le type de balise ou des classes mais je n'y arrive pas.

Voici ci dessous le code PHP de ma page (Enfin juste le bout qui construit la balise Table) :
L'appel de mon fichier JS se fait dans le HEAD de ma page avec : <script src="script.js" defer></script>.
Et dans ce fichier on trouve ce début de script qui devrait me renvoyer en console les propriétés de mes boutons :

Code :

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

1
2
let listeBtSuppr = document.querySelectorAll("#btSuppr");
console.log(listeBtSuppr);

Merci d'avance pour vos conseils.

Code html :

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
 <table>
                    <thead>
                        <tr>
                            <th>Classe</th>
                            <th>Epreuve</th>
                            <th>Competence</th>
                            <th>ActivitÃ© Ã©lÃ¨ve</th>
                            <th>Nbr sÃ©ance</th>  
                            <th>Suppr</th>                    
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($listeProgression as $activite){?>
                            <tr>
                                <td><?php echo $activite["niveau"]?></td>
                                <td>Epreuve : <?php echo $activite["epreuve_id"]?>
                                    <br>Fam Met : <?php echo $activite["famillemetier"]?>
                                </td>
                                <td><details><summary>Comp : <?php echo $activite["code_compterm"]?></summary><?php echo $activite["compterm"]?></details>
                                    <details><summary><?php echo $activite["code_compinter"]?></summary><?php echo $activite["compinter"]?></details>
                                </td>
                                <td><a href="progressiontype_update.php?progressiontype_id=<?php echo $activite["progressiontype_id"] ?>">
                                    <?php echo $activite["code_activiteeleve"]?> :</a> <?php echo $activite["activiteeleve"]?>
                                </td>
                                <td><?php echo $activite["nbr_seance"]?></td>
                                <td><form action="progressiontype_postdeleteactivite.php" method="get">
                                        <input type="hidden" name="progressiontype_id" value="<?php echo $activite["progressiontype_id"] ?>">
                                        <button id="btSuppr" type="submit" class="btDanger">Suppr</button>
                                    </form>
                                </td>
                            </tr>
                        <?php } ?>
                    </tbody>
</table>

**ASCIIDEFOND** · 22/04/2024, 10h59

Salut JmichelF,

let listeBtSuppr = document.querySelectorAll("#btSuppr");

Un Id est toujours unique, il faut utiliser par exemple une class pour querySelectorAll

Un exemple pour afficher une boîte à dialogue pour une confirmation ou annulation de suppression.

Code html :

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
<body>
 
    <!-- Les boutons du tableau -->
    <button type="submit" class="btDanger">Suppr #1</button>
    <button type="submit" class="btDanger">Suppr #2</button>
    <button type="submit" class="btDanger">Suppr #3</button>
    <button type="submit" class="btDanger">Suppr #4</button>
    <button type="submit" class="btDanger">Suppr #5</button>
    <button type="submit" class="btDanger">Suppr #6</button>
 
    <!-- Boîte à dialogue -->
    <dialog id="dialog" style="height: 70px;">
        <p>ici le titre de la boite à dialogue</p>
        <form method="dialog">
            <button value="annulation" style="position: absolute; left: 10px; width: 100px;">Annuler</button>
            <button value="confirmation" style="position: absolute; right: 10px; width: 100px;">Confirmer</button>
        </form>
    </dialog>
 
 
    <script>
        document.querySelectorAll(".btDanger").forEach((boutonselect) => { //On boucle les boutons "btDanger"
            boutonselect.addEventListener('click', () => { // Bouton sélectionné
                document.querySelector('#dialog > p').innerText = `Voulez-vous supprimer l'enregistrement ${boutonselect.textContent}` //Titre de la boîte à dialogue dans une balise "<p>"
                document.getElementById('dialog').setAttribute('open', 'true') // La boîte à dialogue s'affiche
 
                document.getElementById('dialog').addEventListener("mousedown", (e) => {
                    if(e.target.value == "confirmation") {
                        //Confirmation de la suppression
                        console.log("Confirmation")
                    } else {
                        //Annulation de la suppression
                        console.log("Annulation")
                    }
                })
            })
        })
    </script>
</body>

**JmichelF** · 22/04/2024, 11h23

Merci pour ta réponse.
Ca m'éclaire bien sur le code que je dois faire mais en fait çà ne résout pas mon problème initial car cette partie là ne fonctionne pas.

Code :

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

document.querySelectorAll(".btDanger");

Dans mon fichier script.js j'ai écris

Code :

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

1
2
let listeBtSuppr = document.querySelectorAll(".btDanger");
console.log(listeBtSuppr);

et quand je consulte la console sur ma page j'ai ça :
Nom : image.png
Affichages : 205
Taille : 48,3 Ko

J'en conclus que je n'arrive pas à récupérer les propriétés de mes boutons ".btDanger"

**ASCIIDEFOND** · 22/04/2024, 11h44

Et en plaçant l'appel du script après le balise "</table>" ?

**JmichelF** · 22/04/2024, 12h19

Je vient de faire plein de test.
Effectivement, si je mets le script directement dans la page à la fin du Body je retrouve bien les propriétés de mes boutons, le queryselectAll fonctionne.
Par contre si je le mets dans mon fichier script ... ben ca fonctionne pas

Bon on va commencer comme ca

Par contre j'ai quelques questions concernant ta proposition :
- les boutons "Annuler" et Valider" ne fonctionnent pas vraiment comme ils devraient. En fait il faut cliquer sur le texte de la boite (et non pas sur les boutons) et cela renvoie systématiquement "Annulation"
- Quel est la propriété a changer dans la boite de dialogue pour qu'elle se ferme quand on a cliqué. J'ai essayé (open,false) ou (close,true) mais sans résultat.

- Comment faire pour que quand on confirme, cela execute le action de mon formulaire d'origine avec les parametres GET : ma_page.php?parametre=$ma_variable_php

Merci encore pour ton aide

**ASCIIDEFOND** · 22/04/2024, 16h21

Code html :

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
<body>
 
    <!-- Les boutons du tableau -->
    <button class="btDanger">Enregistrement A</button>
    <button class="btDanger">Enregistrement B</button>
    <button class="btDanger">Enregistrement C</button>
    <button class="btDanger">Enregistrement D</button>
    <button class="btDanger">Enregistrement E</button>
    <button class="btDanger">Enregistrement F</button>
 
    <!-- Boîte à dialogue -->
    <dialog id="dialog" style="height: 70px;">
        <p>ici le titre de la boite à dialogue</p>
        <button id="cancel" style="position: absolute; left: 10px; width: 100px;">Annuler</button>
        <button id="confirmation" style="position: absolute; right: 10px; width: 100px;">Confirmer</button>
    </dialog>
 
 
    <script>
        const dialog = document.querySelector("#dialog"), boutons = document.querySelectorAll(".btDanger")
 
        function modaldialogue(btn) {
            dialog.showModal() // Affichage du dialogue
 
            document.querySelector("#cancel").addEventListener("click", () => { //Annulation
                if (btn) {
                    dialog.close() // Fermeture du dialogue
                    btn = null
                }
            })
 
            document.querySelector("#confirmation").addEventListener("click", () => { //Confirmation
                if (btn) {
                    dialog.close(btn.remove()) // Fermeture du dialogue avec la suppression de l'élément sélectionné                
                    window.open(`ma_page.php?parametre=${btn.textContent}`, '_blank') // Envoi en GET la valeur de btn sur ma_page.php  
                    btn = null
                }
            })
        }
 
        boutons.forEach((bouton) => {
            bouton.addEventListener('click', (event) => {
                event.preventDefault()
                dialog.children[0].innerText = `Voulez-vous supprimer l'enregistrement ${bouton.textContent}` //Titre de la boîte à dialogue dans une balise "<p>"
                modaldialogue(bouton)
            })
        })
 
 
    </script>
</body>

Code php :

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

1
2
3
<?php
// ma_page.php
echo "Le bouton sélectionné est: " . htmlspecialchars($_GET["parametre"]);

**JmichelF** · 28/04/2024, 15h11

Merci à toi ASCIIDEFOND
J'ai un peu moins de temps en ce moment ce qui explique mon retard dans les réponses.
Je travaille sur ton code pour l'adapter mais je pense que je vais m'en sortir.

Je marque cette discussion comme résolu.

**NoSmoking** · 29/04/2024, 11h38

Bonjour,
@ASCIIDEFOND :
à chaque ouverture de ta modale tu recrées, donc ajoutes, un listener sur les boutons de la modale !
Je ne pense pas que cela influe sur le code mais la construction est de ce fait mauvaise.

Tu devrais plutôt avoir une construction de ce type :

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
function modaldialogue(btn) {
    // ...
  dialog.showModal() // Affichage du dialogue
}
document.querySelector("#cancel")
  .addEventListener("click", () => { //Annulation
      // ...
    }
  })
document.querySelector("#confirmation")
  .addEventListener("click", () => { //Confirmation
    // ...
  })
boutons.forEach((bouton) => {
  bouton.addEventListener('click', (event) => {
    // ...
  })
})

**JmichelF** · 29/04/2024, 12h19

Merci pour le conseil.
En fait il va falloir que je modifie bien plus le code car pour personnaliser le texte de la boîte de dialogue il faut que je récupère des informations qui seront au niveau du formulaire et non du bouton.
Mais la base est a peu près identique. Je vais dons essayer de travailler autour du code que vous m'avez procurer.
Si je ne m'en sort pas vous aurez me plaisirs de me lire a nouveau 😂

**NoSmoking** · 29/04/2024, 16h47

... il faut que je récupère des informations qui seront au niveau du formulaire et non du bouton.

pour une base de travail, voir la réponse faite dans cette discussion : Afficher des données dans une fenêtre modale

**JmichelF** · 29/04/2024, 17h00

Oui je comprend bien.
Pour le moment je vais faire mes recherches de mon côté mais en cas de besoin je ferais figurer le code de la page.
Merci

**JmichelF** · 01/05/2024, 14h50

Bonjour

Apres un peu de boulot, j'ai réussi à obtenir le résultat souhaité. Enfin presque

Sur un page le bouton Suppr ne fonctionne pas pour la première ligne du tableau alors qu'il fonctionne sur les lignes suivantes.
Je n'arrive pas a trouver le problème.

code HTML de la page (j'ai enlevé certains morceaux)

Code html :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<head>
 
     <script src="script_suppr.js" defer></script> <!--script de gestion des boutons suppr-->
 
    <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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">    
    <link rel="stylesheet" href="style.css">
 
    <title>Liste des cohortes</title>        
    </head>
 
 
<body>
      <header>
 
     <!-- Boîte à dialogue -->
    <dialog id="dialogSuppr" style="height: 150px;">
        <p>ici le titre de la boite à dialogue</p>
        <button id="cancel" style="position: absolute; left: 10px; width: 100px;">Annuler</button>
        <button id="confirmation" style="position: absolute; right: 10px; width: 100px;">Confirmer</button>
    </dialog>
 
 
     <div id="home" class="zoneTitreSite">
              <h1 class="titreSite">Systeme de gestion de la progression BacPro ERA</h1>
     </div>
 
 
      <div>  
          <h2 class="titrePage">Les cohortes</h2>               
      </div>
 
      </header>
 
 
        <main>
 
            <div class="zoneMessage"></div>
 
            <div class="zoneTitreTableau">            
                <h3>Listes des cohortes</h3>
            </div>
 
            <div>            
                <form action="" method="get"> 
                    <div class="zoneTableau">            
                        <table>
                            <thead>
                                <tr>
                                    <th scope="col"> Entrée en seconde</th>
                                    <th scope="col">Entrée en 1ere</th>
                                    <th scope="col"> Entrée en terminale</th>                                    
                                    <th scope="col"> Session examen</th>
                                    <th scope="col"> Select</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
 
                                    <tr>
                                        <td><a href = "cohorte_update.php?cohorte_id = 8" > 2020 </a></td>
                                        <td>2021</td>
                                        <td>2022</td>
                                        <td>2023</td>
                                        <td><input type="radio" id="cohorte"]
                                            name= "cohorte_id"
                                            value= "8"/>
                                        </td>
                                        <td>
                                            <form class="formSuppr" action="">
                                                <input class="inputSuppr" type="hidden" name="cohorte" value="cohorte 2020/2023">
                                                <button class="btSuppr btDanger" formaction="cohorte_delete.php" formmethod="get" type="submit" name="cohorte_id" value="8">
                                                    Supr
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
 
                                    <tr>
                                        <td><a href = "cohorte_update.php?cohorte_id = 4" > 2021 </a></td>
                                        <td>2022</td>
                                        <td>2023</td>
                                        <td>2024</td>
                                        <td><input type="radio" id="cohorte"]
                                            name= "cohorte_id"
                                            value= "4"/>
                                        </td>
                                        <td>
                                            <form class="formSuppr" action="">
                                                <input class="inputSuppr" type="hidden" name="cohorte" value="cohorte 2021/2024">
                                                <button class="btSuppr btDanger" formaction="cohorte_delete.php" formmethod="get" type="submit" name="cohorte_id" value="4">
                                                    Supr
                                                </button>
                                            </form>
                                        </td>
                                    </tr>

Code JS de gestion des boutons

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
let dialogSuppr = document.querySelector("#dialogSuppr")
let listeFormSuppr = document.querySelectorAll(".formSuppr")
console.log(listeFormSuppr)
 
function modaldialogue(btn) {
    dialogSuppr.showModal() // Affichage du dialogue
 
 
    document.querySelector("#cancel").addEventListener("click", () => { //Annulation
        if (btn) {
            console.log('annulation')
            dialogSuppr.close() // Fermeture du dialogue
            btn = null
        }
    })
 
    document.querySelector("#confirmation").addEventListener("click", () => { //Confirmation
        if (btn) {
            console.log('confirmation')
            let action = btn.getAttribute("formaction"); //recupere formaction du bouton
            // dialogSuppr.close(btn.remove()) // Fermeture du dialogue avec la suppression de l'élément sélectionné
            dialogSuppr.close()
            window.open(`${action}?${btn.name}=${btn.value}`, '_self')// Envoi en GET la valeur de btn sur ma_page.php  
            btn = null
        }
    })
}
 
listeFormSuppr.forEach((formSuppr) => {
    let boutonSuppr = formSuppr.querySelector(".btSuppr")
    let inputSuppr = formSuppr.querySelector(".inputSuppr")
    console.log(dialogSuppr)
    console.log(formSuppr)
    console.log(boutonSuppr)
    console.log(inputSuppr)
    boutonSuppr.addEventListener('click', (event) => {
        event.preventDefault()
        //dialogSuppr.children[0].innerText = `Voulez-vous supprimer l'enregistrement ${boutonSuppr.textContent}` //Titre de la boîte à dialogue dans une balise "<p>"
        dialogSuppr.children[0].innerText = `Voulez-vous supprimer ${inputSuppr.value}`
        modaldialogue(boutonSuppr)
    })
})

En consultant la console dans l'inspecteur du navigateur, il semblerait que le formSuppr de la première ligne du tableau n'est pas récupéré (j'ai au total 4 lignes et on ne voit que 3 formSuppr dans la console)
Nom : 2024-05-01 14_43_59-.png
Affichages : 108
Taille : 6,3 Ko

Nom : 2024-05-01 14_43_59-.png
Affichages : 108
Taille : 6,3 Ko

Merci

**JmichelF** · 01/05/2024, 20h11

Sans doute une erreur de débutant ou d'amateur comme moi

L'imbrication de formulaire n'est pas autorisé donc ça plante.
Du coup je remplace mes balises Form qui ne servent à rien par des balises DIV et le tour est joué.

Merci aux contributeurs

**NoSmoking** · 02/05/2024, 11h14

Envoyé par JmichelF

L'imbrication de formulaire n'est pas autorisé donc ça plante.

tu n'as visiblement pas saisi le principe, c'est dans ta Modale que tu dois mettre ton formulaire, ensuite tu lis les données de ta ligne et tu remplies le formulaire de ta Modale avec ces données.
Néanmoins si tu t'en es sorti autrement c'est ce qui compte.

Récupérer des propriétés dans une Modale

JavaScript

Discussions similaires

Partager

Partager