CODEWITHSUNDEEP
phptwitter-bootstrapbootstrap-modal
c5564200
c5564200

Reputation: 151

bootstrap modal inside a php while loop to display different infornmation

so i have a while loop and i am fethcing the name and the description of them from my db so when ever i click on one of the parts i want the modal to display the name of the item that i clicked on in the modal i hope this picture would describe it better below is the code i have so far at the moment when i click on the modal i get displayed the name of the item which is first on the list no matter where i click 

  while($row = mysqli_fetch_assoc($result))
    {
     $name= $row['name_of_product'];
    $description = $row['description']
   ?>
   <a href="#" data-toggle="modal" data-target="#mymodal">
                        <div class="col-sm-4">
                            <?php echo name;  ?>
                            <?php echo description ;  ?>
                        </div>
                    </a>
   <div id="mymodal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                            <p><?php echo $name; ?></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>
            </div>
<?php } ?>

enter image description here

Upvotes: 0

Views: 2980

Answers (3)

Seyhan Sağıroğlu
Seyhan Sağıroğlu

Reputation: 3

It's been almost 4 years but I'm writing for everyone; change data-target(id) as row id. edited code:

 while($row = mysqli_fetch_assoc($result))
    {
     $name= $row['name_of_product'];
    $description = $row['description']
   ?>
   <a href="#" data-toggle="modal" data-target="#<?php echo $row['id']; ?>">
                        <div class="col-sm-4">
                            <?php echo name;  ?>
                            <?php echo description ;  ?>
                        </div>
                    </a>
   <div id="<?php echo $row['id']; ?>" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                            <p><?php echo $name; ?></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>
            </div>
<?php } ?>

Upvotes: 0

Sajjad Ali
Sajjad Ali

Reputation: 304

You are not doing things the way you have to do. You are re-creating your mymodal for every iteration of your while loop which is not a better way to achieve what you want.

Follow these steps:

  1. Create your mymodal outside of your while loop.

  2. Pass the ID of current row to a javascript function and populate the data of that id using javascript.

I have set the things which needs to be done. Try the following code

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!--- display table header row-->
<table style="width:100%">
  <tr>
    <th>name</th> 
    <th>description</th>
    <th>Action</th>
  </tr>  

<?php

while($row = mysqli_fetch_assoc($result))    
      {
     $name= $row['name_of_product'];
    $description = $row['description'];
    $id = $row['id'];   // I am assuming that your table has auto incremented primary key column by the name of id, if not then replace that by $row['your_id_column']
   ?>
   

<!--- desplay the data in a table row -->
  <tr>
    <td id="<?php echo "name_".$id;  ?>"><?php echo $name;  ?></td>
    <td id="<?php echo "description_".$id;  ?>"><?php echo $description ;  ?></td>
    <td><div href="#" data-toggle="modal" data-target="#mymodal" onClick="showModal(<?php echo $id ;  ?>)">Edit</div></td> 
  </tr>
<?php } ?>
</table>  


<!--- Your modal -->
<div id="mymodal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p id="name"></p> <!--- name will be shown here-->
                <p id="description"></p><!--- description will be shown here-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
function showModal(id)
{
    // setting the values of clicked item in the bootstrap Modal
    $("#name").text($("#name_"+id).text());
    $("#description").text($("#description_"+id).text());
}
</script>

Upvotes: 1

lee_337
lee_337

Reputation: 1

Looks like you are not serializing the modals... If you wanted to do things that way your code should be something like;

<!-- language-all: lang-html -->

 while($row = mysqli_fetch_assoc($result)) {
    $procuct_id =  $row['ID'];
    $name =     $row['name_of_product'];
    $description =  $row['description']
?>
   <a href="#" data-toggle="modal" data-target="#mymodal_<?php echo $procuct_id;?>">
        <div class="col-sm-4">
            <?php echo name;  ?>
            <?php echo description ;  ?>
        </div>
    </a>
   <div id="mymodal_<?php echo $procuct_id;?>" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p><?php echo $name; ?></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
<?php } 
<--

A Better way to do it would be to write a javascript function to show the generic modal window, then run an ajax call to load your info into the "modal-body" div. You would have to pass a unique id to the call in order to have your ajax script hit the db and get the info to display.

Upvotes: 0

Related Questions