Populating Bootstrap modal w/ sql from table row click

Question

I've been working on this all week and finally gave up and decided to ask outright. What I have is a list of open jobs in a bootstrap table that is populated via a mysql query. When a row is clicked, a model appears showing the details of the job. The UI works flawlessly, but now that I've tried to get the correct data to show in the modal, I'm at a loss.

From what I've read, the solution seems to be in using AJAX, which I have zero experience with. I can't seem to figure out from reading through other solutions and tutorials if I need my modal information, sql query, or both to be on a separate page. Here is my initial code:

jobs.php

<table class="table table-hover" data-link="row">
        <thead>
        <tr>
            <th>Job #</th>

            <th>Quote #</th>

            <th>Date Started</th>

            <th>Customer Name</th>

            <th>Description</th>

            <th>Amount</th>

            <th>Date Completed</th>

        </tr>
        </thead>
        <tbody>
            <?php
                while ($row = mysqli_fetch_array($jobs)) {
                    // Print out the contents of the entry
                    echo '<tr>';
                    echo '<td><a href="" data-toggle="modal" data-target="#jobModal" ></a>' . $row['id'] . '</td>';
                    echo '<td>' . $row['quote'] . '</td>';
                    echo '<td>' . $row['started'] . '</td>';
                    echo '<td>' . $row['customer'] . '</td>';
                    echo '<td>' . $row['description'] . '</td>';
                    echo '<td>$' . $row['amt'] . '</td>';
                    echo '<td>' . $row['status'] . '</td>';
                    echo '</tr>';
                }
            ?>
        </tbody>
    </table>

Modal - Also in jobs.php (ignore the placeholders, they will be replaced with php variables when I get things working)

<div class="modal fade" id="jobModal" tabindex="-1" role="dialog" aria-labelledby="jobModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <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="jobModalLabel"><strong>Job <?php echo $row['id']; ?></strong></h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-2">
                            Quote #
                        </div>
                        <div class="col-lg-2">
                            PO # 1234567
                        </div>
                        <div class="col-lg-4">
                            Status: In Progress
                        </div>
                        <div class="col-lg-4 text-right">
                            Customer Name
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <br/>
                            Started: 03/01/2015
                        </div>
                        <div class="col-lg-4">
                            <br/>
                            Completed:
                        </div>
                        <div class="col-lg-4 text-right">
                            Primary Contact
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-lg-6 text-center">
                            <strong>PUMP SPECS</strong><br/><br/>
                        </div>
                        <div class="col-lg-6 text-center">
                            <strong>MOTOR SPECS</strong>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3">
                            Mfg: Taco
                            <br/><br/>
                            Size: 6x4
                        </div>
                        <div class="col-lg-3">
                            Mod: 54654856daf5
                            <br/><br/>
                            S/N: 54654856daf5
                        </div>
                        <div class="col-lg-2 border-left">
                            Mfg: Baldor
                            <br/><br/>
                            Frame: 215T
                        </div>
                        <div class="col-lg-2">
                            HP: 50
                            <br/><br/>
                            Encl: TEFC
                        </div>
                        <div class="col-lg-2">
                            RPM: 1800
                            <br/><br/>
                            Volts: 100
                        </div>
                    </div>
                    <div class="row"></div>
                    <div class="col-lg-2 col-lg-offset-6 border-left">
                        <br/>
                        Amps: 240/360
                    </div>
                    <div class="col-lg-4">
                        <br/>
                        S/N: 54654856daf5
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-lg-12">
                            <strong>Job Description:</strong>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Edit Job</button>
                </div>
            </div>
        </div>
    </div>

From this point, is there anyway I can get the id to come through on the modal side so I can fill in the rest of the information using php like I did with the original table? If I do need to use ajax, what is the correct way to go about doing so?

Answer 1

[EDITED]

If you try this then?

TABLE TO OPEN MODALS

<?php
    while ($row = mysqli_fetch_array($jobs)) {
        // Print out the contents of the entry
        echo '<tr>';
        echo '<td><a href="#" data-toggle="modal" data-target="#jobModal'.$row['id'].'" >Click here to edit</a>' . $row['id'] . '</td>';
        echo '<td>' . $row['quote'] . '</td>';
        echo '<td>' . $row['started'] . '</td>';
        echo '<td>' . $row['customer'] . '</td>';
        echo '<td>' . $row['description'] . '</td>';
        echo '<td>$' . $row['amt'] . '</td>';
        echo '<td>' . $row['status'] . '</td>';
        echo '</tr>';
    }
?>

MODALS

<?php while ($row = mysqli_fetch_array($jobs)) { ?>
    <div class="modal fade" id="jobModal<?php echo $row['id']; ?>" tabindex="-1" role="dialog" aria-labelledby="jobModalLabel<?php echo $row['id']; ?>" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <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="jobModalLabel<?php echo $row['id']; ?>"><strong>Job <?php echo $row['id']; ?></strong></h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Edit Job</button>
                </div>
            </div>
        </div>
    </div>
<?php } ?>