CODEWITHSUNDEEP
phpjquerymysqltwitter-bootstrap
tmariaz
tmariaz

Reputation: 57

Bootstrap Modal with mysql data

I have a html table with list of Product Name and ID, upon clicking the Product Name Link I wanted to open a Modal and show the Item with respect to ID.

I wanted to pass $code to the Model and retrieve data. How should I do?

My code below..

<a href="#myModal" data-toggle="modal" data-target="#myModal" data-code="@<? echo $code; ?>">Product 1</a>
<a href="#myModal" data-toggle="modal" data-target="#myModal" data-code="@<? echo $code; ?>">Product 2</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
            <?
                $code_id = isset($_GET['code']) ? $_GET['code'] : false;
                $result = $db->prepare("SELECT * FROM $tbl_name WHERE id=:code LIMIT 1");
                $result->bindValue(':code', $code_id, PDO::PARAM_STR);
                $result->execute();
                $row = $result->fetch(PDO::FETCH_ASSOC);
                $unit = $row['unit']; $name = $row['name']; $price = $row['price'];
                ?>
            <table class="table">
                <tr>
                    <th style="text-align: center;">#</th>
                    <th style="text-align: center;">Unit</th>
                    <th style="text-align: center;">Product Name</th>
                    <th style="text-align: center;">Price</th>
                </tr>
                <tr>
                    <td><? echo $i; ?></td>
                    <td><? echo $unit; ?></td>
                    <td><? echo $name; ?></td>
                    <td><? echo $price; ?></td>
                </tr>
            </table>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

Upvotes: 3

Views: 3733

Answers (2)

Logan Wayne
Logan Wayne

Reputation: 5991

The data-target of your link would determine what modal to open. So you have to link the attribute of data-target by having the class attribute of your modal the same with the data-target attribute of your link.

Try this:

while(/* YOUR CONDITION FOR FETCHING DATA FROM YOUR DB */){
  ?>
    <a href="#myModal" data-toggle="modal" data-target=".myModal<?php echo $uniqueid; ?>" data-code="@<? echo $code; ?>">Product 1</a>
  <?php

  <!-- START OF MODAL -->
  <div class="modal fade myModal<?php echo $uniqueid; ?>" .....>
    <!-- REST OF MODAL CODE -->
  </div>

} /* END OF LOOP */

Just replace the $uniqueid with your primary key.

Upvotes: 0

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

I realized Logan's answer wouldn't work because he was targeting classes instead of Ids. data-target for each link to modal should be a unique id. I created a variable $uid (unique identifier), and initialised it to one (alternatively you could use your primary key). Each modal will have an id of myModal+$uid, and each link will point to a specific modal's id. 

<?php 
     $code_id = isset($_GET['code']) ? $_GET['code'] : false;
     $result = $db->prepare("SELECT * FROM $tbl_name WHERE id=:code LIMIT 1");
     $result->bindValue(':code', $code_id, PDO::PARAM_STR);
     $result->execute();

     //checks if there are results before sending it to the while loop
     if ($result->num_rows > 0) {
         $uid = 1;//alternatively you can use your primary key from the table
         while($row = $result->fetch_assoc()){
?>
<a href="#myModal" data-toggle="modal" data-target="#myModal<?php echo $uid; ?>" data-code="@<? echo $code; ?>">Product <?echo $uid?></a>


  <!-- start modal, realise the id of each modal -->
  <div class="modal fade" id="myModal<?php echo $uid; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal fade">
    <!--the rest of your code-->
  </div>

<?php 
      $uid = $uid +1;//increase uid        
      }// end while 

 }//end if statement ?>

Upvotes: 1

Related Questions