Forum : Problem Modal dans un Foreach

Bonjour à tous,

Dans mon code PHP ci-dessous je fais un Foreach en PHP à l’intérieur duquel j'ai fais un modal en HTML.

Ce modal vient d'afficher l'user via une requête SQL.

le modal s'ouvre just quand la requête return une valeur mais quand il y a plus de valeur le modal ne s'ouvre pas

Quel est le problème? Je vous remercie d'avance!

<?php
class afficherUser  
       {
          function connection()
           {
            $con=mysql_connect('localhost','root','');
            mysql_select_db('usersTable');
           }

           function ShowUser()
           {

            $sql="SELECT*FROM users  LIMIT 3 ";
            $req= mysql_query($sql);

                while ($data=mysql_fetch_assoc($req)) 
                {
                   $tab[]=$data;
                }
                  return $tab;

            }   

       }

$data=new afficherUser();
$data->connection();
$result=$data->ShowUser();

?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

<?php      foreach ($result as $value): ?>

<!-- Trigger/Open The Modal -->
<button id="myBtn" class="myBtn">Ouvrir le Modal </button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">

   <?php echo $value["user"]." ".$value["u_id"];?>

    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

<?php endforeach; ?>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

</body>
</html>

p1ngouin

Tu ne peux pas utiliser un id dans un foreach. Un id est destiné à être unique. Là, ton JS ne sait pas quel élément prend étant donné qu'il y a une répétion de nom. Si tu veux afficher un utilisateur par modal, il faut que tu génères des id uniques avec des classes partagées, et du coup tes requêtes JS pour ouvrir les modales se feront sur les classes et non plus les id. Si tu souhaites afficher toutes les utilisateurs dans une seule modal, il faut que tu déplaces ton foreach à l'intérieur du contenu de ta modal.

Problem Modal dans un Foreach

1 réponse