How to use Modal in while loop with dynamic data

Question

The code is working fine but the output is not acceptable. It is as given in code. The code provide the valid data for each modal but output slashes.

Thanks in advance for any help.

<?php 
include("../db_connect.php");      
$sql="select * from notifications where userid='$uid' or rec_id='$uid'";
$result=mysqli_query($con,$sql);
?>
<div class="col-sm-10">
<table class="table table-striped ">
<thead style="background-color:skyblue;">
<td></td><td></td><td></td><td></td><td><h3><i  class="fa fa-cogs"></i>Notifications</h3></td><td></td><td></td><td></td></thead>
<thead style="background-color:wheet;" class="table-bordered">
<tr>
<td><b>Sr.No.</b></td>
<td><b>From</b></td>
<td><b>Recevier</b></td>
<td><b>Amount</b></td>
<td><b>Details</b></td>
<td><b>Date</b></td>
<td><b>User Info</b></td>
<td><b>Status</b></td>
</tr>
</thead>
<tbody class="table-bordered ">
    <?php
    if($result)
    {
        $i=1;
        while($row = $result->fetch_assoc()) {

       $sql12="select * from users inner join bank_details on users.userid=bank_details.userid  where users.userid='".$row['rec_id']."'";
       $result12=mysqli_query($con,$sql12);
       $row1 = $result12->fetch_assoc();


            echo "<tr><td>".$i."</td><td>".$row['userid']."</td><td>".$row['rec_id']."</td><td>".$row['amount']."</td><td>".$row['details']."</td><td>".$row['date1']."</td>";
            if($uid == $row['rec_id'])
            {
                echo "<td><button class='btn btn-warning' disabled data-toggle='modal' data-target='#myModal".$i."'>View</button></td>";

            }
            else
            {
            echo "<td><button class='btn btn-success'  data-toggle='modal' data-target='#myModals".$i."'>View</button></td>";   
            }
            if($uid == $row['userid'])
            {
                if($row['status']=="pending")
                {
                echo "<td><button class='btn btn-info' disabled id='sndr'>Pending to Accept</button></td></tr>";
                }
                else if($row['status']=="accepted")
                {
                    echo "<td><button class='btn btn-success' disabled id='sndr'>Request Accepted</button></td></tr>";
                }
                else
                {
                    echo "<td><button class='btn btn-danger' disabled id='sndr'>Request Rejected</button></td></tr>";
                }
            }
            else
            {
                if($row['status']=="pending" )
                {
                ?>
                <td>
                 <form role="form">
                    <div class="form-group">
    <select class="form-control" id="sel1"  >
    <option>Select</option>
    <option value="accepted" onclick="aprvs(<?php echo $row['id']; ?>, this.value);"><span class="btn btn-success"> Accept</span></option>
    <option value="rejected" onclick="aprvs(<?php echo $row['id']; ?>, this.value);"><span class="btn btn-danger">Reject</span></option>
  </select>
  </div>
  </form>
  </td>
  </tr>
  <?php
                }
                    else if($row['status']=="accepted")
                    {
                        echo "<td><button class='btn btn-success' disabled id='sndr'>Request Accepted</button></td></tr>";
                    }
                    else{
                        echo "<td><button class='btn btn-danger' disabled id='sndr'>Request Rejected</button></td></tr>";
                    }
            }

            ?>
            <div    class='modal fade' id='<?php echo "myModals".$i.""; ?>' role='dialog' tabindex="-1" aria-hidden="true">
<div class="modal-dialog" >

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header" style="background-color:green;padding:10px;">
      <button type="button" class="close" data-dismiss="modal" >&times;</button>
      <center>
      <h4 class="modal-title" align="center" style="color:white;">User Details</h4>
      </center>
    </div>
    <div class="modal-body" style="padding:10px;">


            <table class='table table-striped'>

            <thead>
            <tr><td><h4 style='color:blue;'></b>User Details:</b></h4></td><td></td></tr>
            </thead>
            <tbody>
            <tr><td><b>User Id:</b></td><td><?php echo $row1['userid']; ?></td></tr>
            <tr><td><b>Name:</b></td><td><?php echo $row1['name']; ?></td></tr>
            <tr><td><b>Father Name:</b></td><td><?php echo $row1['fname']; ?></td></tr>
            </tbody>
            <!--
            <thead><tr><td><h4 style='color:blue;'></b>Bank Details:</b></h4></td><td></td></tr></thead>
            <tbody>
            <tr><td><b>Bank Name:</b></td><td><?php echo $row1['bname']; ?></td></tr>
            <tr><td><b>Branch:</b></td><td><?php echo $row1['branch']; ?></td></tr>
            <tr><td><b>A/c. No.:</b></td><td><?php echo $row1['account_no']; ?></td></tr>
            <tr><td><b>IFSC Code:</b></td><td><?php echo $row1['ifs']; ?></td></tr>
            <tbody>

            <thead><tr><td><h4 style='color:blue;'></b>Contact Details:</b></h4></td><td></td></tr></thead>
            <tbody>
            <tr><td><b>Mobile No.:</b></td><td><?php echo $row1['mob']; ?></td></tr>
            <tr><td><b>Alternate No.:</b></td><td><?php echo $row1['alt']; ?></td></tr>
            <tr><td><b>E-Mail:</b></td><td><?php echo $row1['email']; ?></td></tr>
            </tbody>-->
            </table> 

    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>


   <?php                
        echo "</div>";  
            $i++;       
        }               
    }
    else
    {
        echo "<tr><td>No Notifications to show</td></tr>";
    }
?>
</tbody>
</table>
<?php   
 }
 ?>

The output is received as given

Why do you have <td></td><td></td><td></td><td></td>?

Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman

2015-10-18 13:17:48 +00:00
Commented Oct 18, 2015 at 13:17 — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Oct 18, 2015 at 13:17

Shehary · Accepted Answer · 2015-10-18 15:39:53Z

Your approach to use modal inside loop is wrong, imagine you have thousands of records and modal HTML is repeating 1000's of times inside loop.

Remove modal from inside the loop and put it outside the loop.

so PHP will be, for reference I name the page Main.php

<tbody class="table-bordered">
<tr>
<?php
if($result) {
$i=1;
while($row = $result->fetch_assoc()) {
$sql12="select * from users inner join bank_details on users.userid=bank_details.userid  where users.userid='".$row['rec_id']."'";
$result12=mysqli_query($con,$sql12);
$row1 = $result12->fetch_assoc();
    echo "<td>".$i."</td><td>".$row['userid']."</td><td>".$row['rec_id']."</td><td>".$row['amount']."</td><td>".$row['details']."</td><td>".$row['date1']."</td>";
        if($uid == $row['rec_id']) {
            echo "<td><button class='btn btn-warning' disabled data-toggle='modal' data-target='#myModal".$i."'>View</button></td>";
        } else {
            echo "<td><button class='btn btn-success' data-toggle='modal' data-target='#myModals".$i."'>View</button></td>";   
        }
        if($uid == $row['userid']){
            if($row['status']=="pending") {
                echo "<td><button class='btn btn-info' disabled id='sndr'>Pending to Accept</button></td>";
            } else if($row['status']=="accepted") {
                echo "<td><button class='btn btn-success' disabled id='sndr'>Request Accepted</button></td>";
            } else {
                echo "<td><button class='btn btn-danger' disabled id='sndr'>Request Rejected</button></td>";
            }
        } else {
            if($row['status']=="pending" ) {
?>
    <td>
        <form role="form">
        <div class="form-group">
            <select class="form-control" id="sel1">
                <option>Select</option>
                <option value="accepted" onclick="aprvs(<?php echo $row['id']; ?>, this.value);"><span class="btn btn-success"> Accept</span></option>
                <option value="rejected" onclick="aprvs(<?php echo $row['id']; ?>, this.value);"><span class="btn btn-danger">Reject</span></option>
            </select>
        </div>
        </form>
    </td>
<?php 
            } else if($row['status']=="accepted") {
                echo "<td><button class='btn btn-success' disabled id='sndr'>Request Accepted</button></td>";
            }else{
                echo "<td><button class='btn btn-danger' disabled id='sndr'>Request Rejected</button></td>";
            }
        }
?>
<?php 
    $i++; } 
    } else {
        echo "<td>No Notifications to show</td>";
    }
?>
</tr>
</tbody>
</table>
<?php } ?>

And make following changes in modal call buttons, add href='info.php?id=".$i."' and remove ".$i." from data-target='#myModal".$i."'

echo "<td><button class='btn btn-warning' disabled data-toggle='modal' data-target='#myModal' href='info.php?id=".$i."'>View</button></td>";

echo "<td><button class='btn btn-success' data-toggle='modal' data-target='#myModal' href='info.php?id=".$i."'>View</button></td>";

Now put following Modal HTML outside the loop in Main.php and replace id='<?php echo "myModals".$i.""; ?>' with modal id id='myModal'

<div class='modal fade' id="myModal" role='dialog' tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" >
    <!-- Modal content-->
        <div class="modal-content">
            //Content Will Load Here
        </div>
    </div>
</div>

Now create a new PHP file info.php e.g;

<?php
//Database Connection
$id = $_GET['id'];
//Run Query to fatch data from database against `$id`
?>
<div class="modal-header" style="background-color:green;padding:10px;">
    <button type="button" class="close" data-dismiss="modal" >&times;</button>
    <center><h4 class="modal-title" align="center" style="color:white;">User Details</h4></center>
</div>
<div class="modal-body" style="padding:10px;">
    <table class='table table-striped'>
        <thead>
            <tr><td><h4 style='color:blue;'></b>User Details:</b></h4></td><td></td></tr>
        </thead>
        <tbody>
            <tr><td><b>User Id:</b></td><td><?php echo $row['userid']; ?></td></tr>
            <tr><td><b>Name:</b></td><td><?php echo $row['name']; ?></td></tr>
            <tr><td><b>Father Name:</b></td><td><?php echo $row['fname']; ?></td></tr>
        </tbody>
    </table> 
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

and Last, add following code to Main.php page, it will remove the old data from modal and load new data against new id

$(document).ready(function() {
    $('#myModal').on('hide.bs.modal', function () {
        $(this).removeData('bs.modal');
    });
});

Table structure has loads of unnecessary <td> and <tr> tags and some opens and some closed wrongly causing the problem as shown in snapshot, can't cover all that here so check this Fiddle will give you idea what and where you are doing wrong.

Collectives™ on Stack Overflow

How to use Modal in while loop with dynamic data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related