Pass mysql table data from php page to bootstrap modal

Question

I have mysql table named project with columns named Project Name, Project Number,Project Status,Project Start Date,Project End Date. Also I have a php page called 'projects.php' where I am displaying the data from mysql table project in the page but I am showing only data from first 3 columns ( Project Name,Project Number,Project Status ). Also for every row in php table I have given a link named view clicking which will trigger a modal.

I want to show data from all the columns of that particular row in the modal. Please guide me how I can go forward with this situation.

I am very new to php, javascript, jquery. Hence unable to figure out how to pass the data to modal. Following is the code which might help.

Table in projects.php:

<table  class="table table-striped table-condensed">

<thead>
 <tr>
  <th>Project Name</th>
  <th>Project Number</th>
  <th>Project Status</th>
 </tr>
</thead>

<tbody>
    <?php 

        $sql = "SELECT proj_name, proj_status, proj_num, 
                FROM Project";
        $records = mysql_query($sql);

        while (  $proj =  mysql_fetch_assoc($records)   )
        {
            echo "<td>".$proj['proj_name']."&nbsp;&nbsp;<a href='#testmodal' data-toggle ='modal'>view</a></td>";
            echo "<td>".$proj['proj_num']."</td>";
            echo "<td>".$proj['proj_status']."</td>";
            echo "</tr>";
        }
   ?>
</tbody>

</table>

Following is my modal code: ( which is just basic one )

<div class="modal" id="testmodal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h3 class="modal-title"><b>Test Modal</b></h3>
                    </div><!--end of modal-header-->

                    <div class="modal-body">
                        This is my test Modal !!
                    </div>

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

                </div>                  
            </div>
</div>

Answer 1

What you need to do is store the results of your query into an array.

$projects = array();
$sql = "SELECT * FROM Project";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result))
{
    $projects[] = $row;
}

Then you can do a foreach loop on your table and modal.

<?php foreach ($projects as $project): ?>
<tr>
    <td><?= $project['proj_name'] ?>&nbsp;&nbsp;<a href='#testmodal' data-toggle ='modal'>view</a></td>
    <td><?= $proj['proj_num'] ?></td>
    <td><?= $proj['proj_status'] ?></td>
</tr>
<?php endforeach; ?>

Answer 2

In my opinion, you should:

1. Query all the fields you want in the SQL you provided.
2. Form table with all the fields but don't display cells you don't need in the grid. style="display: none" for td .
3. Show your modal with javascript and get the fields you want from the table row's cells.
4. In addition, you may name each table cell with a class, to get it easily with js.

Answer 3

Firstly first update your mysql connection to mysql i further as a beginner you might want to try the plugin on github to be found under:

https://github.com/nakupanda/bootstrap3-dialog

If you insist on the out of the box modal then at least try the example to be found here http://getbootstrap.com/javascript/#modals-examples