Partage
  • Partager sur Facebook
  • Partager sur Twitter

Ecouter plusieurs boutons dans un tableau

    19 avril 2024 à 21:08:35

    j'ai un tableau qui se crée en PHP tel que sur l'extrait de code ci dessous. Le bouton sert à supprimer avec un script PHP mais je voudrais que l'utilisateur confirme la suppression. Je voudrais donc ajouter un couche JS qui "ecoute" les boutons et qui demande confirmation quand l'utilisateur clique dessus.

    Je sais faire cela pour 1 seul bouton dont je connait l'Id  avec getElementById ou avec plusieurs éléments dans une DIV mais ici je ne suis pas assez bon pour m'en sortir car par définition mon tableau est dynamique.

    <tbody>
    <?php foreach ($listeProgression as $activite){?>
             <tr>
                 <td><?php echo $activite["niveau"]?></td>
                 <td><button class="btDanger"><a href="progressiontype_postdeleteactivite.php?progressiontype_id=<?php echo $activite["progressiontype_id"] ?>">
                        <?php echo $activite["code_activiteeleve"]?></a>
                     </button>
                 </td>
                 <td><?php echo $activite["activiteeleve"]?> </td>
             </tr>
        <?php } ?>
     </tbody>

    -
    Edité par Jean-michelFrances 20 avril 2024 à 16:46:10

    • Partager sur Facebook
    • Partager sur Twitter
      19 avril 2024 à 22:02:29

      Bonjour, Merci de lire les règles du forum AVANT de créer un sujet.

      Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
      Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.

      Pour plus d'informations, nous vous invitons à lire les règles générales du forum

      Merci de colorer votre code à l'aide du bouton Code </>

      Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton  </> de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: php;">Votre code ici</pre>.

      Merci de modifier votre message d'origine en fonction.

      Manque de Politesse

      Votre message ne comporte pas ou peu de formules de politesse (« Bonjour », « Merci », « Au revoir », etc.). Les règles du site exigent que chaque nouveau message comporte un minimum de politesse. Après tout, les gens qui répondent le font gratuitement, sur leur temps libre. Ils méritent bien un minimum de considération, n'est-ce pas ?

      Liens conseillés


      Bonsoir, Passez votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

      Un lien et un bouton sont deux éléments interactifs, on ne place pas l'un dans l'autre c'est soit l'un soit l'autre.

      Pour ce que vous voulez faire, voir la méthode confirm() =>

      https://www.toutjavascript.com/reference/ref-window.confirm.php

      • Partager sur Facebook
      • Partager sur Twitter
        20 avril 2024 à 17:07:00

        "Un lien et un bouton sont deux éléments interactifs, on ne place pas l'un dans l'autre c'est soit l'un soit l'autre."

        Je suis un autodidacte et je fait ce que je peux, il y a un peu de bricolage et je n'ai pas trouvé d'autre solution pour résoudre mon problème. Je voulais un aspect bouton, mais il fallait que je passe des paramètres par GET ce que ne peut faire un bouton seul. Il aurait fallut que je crée un FORM avec des input cachés ou je ne sais qu'elle solution plus propre. Donc je te l'accorde, c'est pas propre mais ca a l'avantage de fonctionner et d'avoir l'aspect souhaité. Je promet d'essayer d'améliorer le code :ange:

        Pour l'autre partie, je me penche sur ta suggestion et je ferais un retour.

        Merci


        Voici un retour apres lecture et essaie

        Effectivement la méthode "Confirm" fait quelque chose qui pourrait convenir même si elle travaille sur un mode différent de ce que j'ai appris a faire.

        Elle ne résoudra pas tout mes cas de figure car j'ai besoin de quelque chose de similaire pour confirmer des données saisies par l'utilisateur et là ca ne fera pas le job car il faut que je puisse récupérer ce qui a été saisie dans les INPUT pour les afficher dans la boite de confirmation.

        Apparemment avec confirm,  je doit écrire le script dans la page HTML et il est appelé au click sur le bouton. J'ai essayé de mettre ce script avec mes autres scripts dans un fichier JS mais ca ne fonctionne pas, le bouton n'appelle pas la fonction.

        Maintenant il me reste a trouver comment faire pour que le bouton envoie mon formulaire au script PHP qui fait la suppression dans ma BBD au lieu de changer la couleur du background ^^

        Merci pour l'aide.

        Je reste a l'écoute pour d'autres solutions.

        -
        Edité par Jean-michelFrances 20 avril 2024 à 17:41:13

        • Partager sur Facebook
        • Partager sur Twitter
          21 avril 2024 à 22:31:00

          Hello

          Après analyse de ton code, je suppose qu'un truc comme ça devrait fonctionner. Je te laisse tester et adapter au besoin (il faudrait que tu files un ID à ton <table> contenant, comme #myTable par ex)

            // Récupération du tableau contenant les boutons de suppression
            const table = document.getElementById('myTable');
          
            // Ajout d'un gestionnaire d'événement "click" sur le tableau
            document.addEventListener('click', function (event) {
              // Filtre les click sur les éléments ".btDanger" uniquement
              if (!event.target.matches('button.btDanger'))
                return;
          
              // Récupère les éléments nécessaires à faire la suppression
              const button = event.target; // Le bouton lui-même
              const link = button.querySelector('a').href; // La valeur "href" du lien dans le bouton
              const activiteeleve = button.closest('tr').querySelector('td:last-of-type').textContent; // Le contenu du dernier TD dans le TR où se trouve le bouton (je suppose que c'est la donnée à afficher dans la popup de confirmation)
          
              // Popup de confirmation
              const DELETE_MESSAGE = `Confirmez-vous la suppression de ${activiteeleve} ?`;
              if (confirm(DELETE_MESSAGE)) {
                // Si la boite de dialogue est validée avec "OK", redirection vers le lien de suppression
                return location.href = link;
              }
            });



          -
          Edité par ninjavascript 21 avril 2024 à 22:31:30

          • Partager sur Facebook
          • Partager sur Twitter

          Ecouter plusieurs boutons dans un tableau

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          • Editeur
          • Markdown