Modal working only once in loop

Question

I've been working on a Library Management Sys in PHP. It has a page (collect_fine.php) where I've been calling all the fields related to the each & every member from the DB in a loop.

Along with all the records, I'm also echoing a button to activate a modal on getting click.

The code is as below -

do{?>

<?php
$br_id = $row['Member_id'];
?>
  <tr>
  <td style="outline:1px dotted #000000" height="auto"  width="80px" align="center"><?php echo $row['Member_id']?></td>
  <?php
    $mem_id = $row['Member_id'];  
  ?>
  <td style="outline:1px dotted #000000" height="auto"  width="340px" align="justify">&nbsp;&nbsp;&nbsp;<?php echo $row["Member_name"]?></td>  
  <td style="outline:1px dotted #000000" height="auto"  width="130px" align="center"><?php echo $row['Class']?></td>
  <td style="outline:1px dotted #000000" height="auto"  width="150px" align="center"><?php echo $row['Contact']?></td>
  <td style="outline:1px dotted #000000" height="auto"  width="120px" align="center"><?php
  $count=mysqli_query($conn,"SELECT COUNT(Book_id) AS total_things FROM issued_books WHERE Borrower_id = '$br_id' AND Date_returned = '0'");
  $cnt = mysqli_fetch_array($count,MYSQL_ASSOC);
  $num_results = $cnt["total_things"];
  echo $num_results;
?></td>
  <td style="outline:1px dotted #000000" height="auto"  width="80" align="center"><?php echo $row['Fine_Amt']?></td>
  <td style="outline:1px dotted #000000" width="120px" align="center">
 <?php
 date_default_timezone_set('Asia/Kolkata');
 $date = date('Y-m-d H:i:s');
 if($row['Fine_Amt']>0)
 {
 echo '<style>

@media screen {
    #printSection {
        display: none;
    }
}
@media print {
    body * {
        visibility:hidden;
    }
    #printSection, #printSection * {
        visibility:visible;
    }
    #printSection {
        position:absolute;
        left:0;
        top:0;
    }
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
</style>
<button id="myBtn">Collect Fine</button>

<div id="myModal" class="modal">

  <div class="modal-content">
    <span class="close">&times;</span>';
    echo '<p><h1>NTHS eLibrary</h1></br>
    <h2>Fine Reciept of '.$row['Member_name'].'</h2></br>
    <div align="center">';

    ?>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
<?php }while($row=mysqli_fetch_array($Result));?>

The above code works perfectly fine but only for the top row :(

What could possibly the reasons for this. Please help

Is there a reason why you want to echo `css` style(s) in `php`? — Marylyn Lajato, May 20 '17 at 09:32
The id `myModal` is repeated many times in the loop. It should be unique. Solution: Use a counter and add it to the name of the id. — KIKO Software, May 20 '17 at 09:33
your code is vulnerable to [sql injection attacks](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php?rq=1) — hassan, May 20 '17 at 09:36
@eeya, I tried not to put the style tag under php but then it deosn't work — Parvez Khan, May 20 '17 at 09:41
@KIKO I can only see myModal used only twice in the code, where else do you see it? — Parvez Khan, May 20 '17 at 09:42
@Parvez Khan: You use a `do {} while ()` around your code, that means the the id is repeated many times in your HTML output. — KIKO Software, May 20 '17 at 09:43
oh yes, I got that now Based on Virushabdoss answer, the buttons have started working, but the modal shows the record of the top most row in the list, what id should I assign to the modal? — Parvez Khan, May 20 '17 at 09:49

score 1 · Answer 1 · answered May 20 '17 at 09:36

1

In HTML, 'id' attribute should be unique. You are trying to set same 'id' to all buttons. Try to set button id dynamically.

answered May 20 '17 at 09:36

Vishnu

127
6

ok, I've assigned the id for the button same as the member_id, all the buttons have started working now, but the modal only shows the record of the top most listed member – Parvez Khan May 20 '17 at 09:47
Now, you should do the same to set dyanamic modal id for this line
– Vishnu May 20 '17 at 09:58
And you need to tell JS which modal have to display for the corresponding member – Vishnu May 20 '17 at 10:02
Plz help me in setting the id for the modal
tag, I've tried a few options but they're not working
– Parvez Khan May 20 '17 at 10:24
Even if attempt to change the id of the modal
, the modal box stops popping up, plz help me with this
– Parvez Khan May 20 '17 at 10:59
Your modal id should not match with your button id. The thing you need to do is, create dynamic modal with dynamic id. say
, where 1 says member_id. And create an event to tell js which model need to show. For example, if you click "member1" button, you need to let js know to show "memberDetail1" model
– Vishnu May 20 '17 at 11:06
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/144726/discussion-between-parvez-khan-and-virushabadoss). – Parvez Khan May 20 '17 at 11:34

Modal working only once in loop

1 Answers1