Forum d'entraide PHPFrance

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 chercher l'user via une requête SQL.

le modal s'ouvre just quand la requête return just 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>

Bonjour,

Lorsque tu as plus d'un résultat, tu génères autant de bloc html identiques que de résultats retournés. Du coup, les id que tu utilises pour ces blocs ne sont plus unique dans ta page puisque répété à chaque user. Les fonctions javascript se basant sur ces ids ne peuvent donc plus fonctionner correctement

Il faut donc modifier ton code pour que la boucle ne génère pas d'id identique (en incluant un compteur ou une valeur issue de ta requête par exemple), et adapter le javascript pour qu'il fasse appel à ces même id.

Forum d'entraide PHPFrance

Modal dans un Foreach

Modal dans un Foreach

Re: Modal dans un Foreach