CODEWITHSUNDEEP
javascriptphpjqueryhtmlmodal-dialog
Abdes
Abdes

Reputation: 996

How to use Modal in FOREACH

I have a modal which pops up when selecting a button. This modal should populate the user's name.

The problem is that, when I select the button, it only populates the first user's details and not the rest of the users in the table. I dont understand why. If anyone can point out why I would be much obliged.

Here is my code 

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

        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 Model -->
<button id="myBtn" class="myBtn">Open 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>

Upvotes: 1

Views: 15410

Answers (3)

Fahmi B.
Fahmi B.

Reputation: 798

id should be unique. But in your code you can't make one id for all triggers and one id for all modals.

take for example,

 <button id="myBtn-<?= $value["u_id"]; ?>" class="myBtn">Open Modal</button>

and in your div,

 <div id="myModal-<?= $value["u_id"]; ?>" class="modal">

and make sure you to modify your javascript.

Upvotes: 1

Rishanthakumar
Rishanthakumar

Reputation: 899

Modal id should be unique and there should be a way to identify the modal id in order to trigger the relevant modal.

button element ,

<button id="myBtn" class="myBtn" onclick="ShowModal('myModal-<?= $value["u_id"]?>')"Open Modal</button>

then modal id,

<div id="myModal-<?= $value["u_id"]; ?>" class="modal">

and Javascript

function ShowModal(id)
{
  var modal = document.getElementById(id);
  modal.style.display = "block";
}

Upvotes: 4

Fil
Fil

Reputation: 8873

Here's another solution,

  <?php $count = 0; ?>
  <?php foreach ($result as $value):?>
    <button id="myBtn" class="myBtn" data-toggle="modal" data-target="#myModal<?php echo $count; ?>">Open Modal</button>
    <div id="myModal<?php echo $count; ?>" class="modal fade" role="dialog">
      <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 $count++; ?>
  <?php endforeach; ?>

Notice this part?

data-toggle="modal" data-target="#myModal<?php echo $count; ?>"

it will determine the target modal, and #myModal<?php echo $count; ?> will like 

#myModal0, 
#myModal1, 
#myModal2,

in browsers inspect element.

Similar to this,

<div id="myModal<?php echo $count; ?>" class="modal fade" role="dialog">

the id of this div will look like same as above. The reason for this is, you will have a unique id's throughout the loop.

Upvotes: 1

Related Questions