Passing MySQL data to Modal Form via PHP

Question

I am attempting to use modal as a simple means for users to edit data in a MySQL db. It appears that only the first line retrieved in my SELECT statement is available to modal and I do not understand why. In other words, imagine a table with several columns, the first being a customer's name. My goal is to be able to click a name, show a modal with a form, and then pass the results of that form to update the db using PHP. No matter which name I click, though, only values related to the first resulting line are passed.

Table 'Item' includes information for all of the lines that will be present in the table.

$personID is passed via GET and is the means of selecting customers of a specific employee.

The modal div is included within the PHP while clause.

The form contained in the modal passes the information to a basic PHP update script.

Thanks very much, Mike

PHP Select Stmt:

    <?php
        $query = "SELECT * FROM item WHERE personID = $personID";
        $result = mysql_query($query);
        while($info=mysql_fetch_array($result)){
        $itemID = $info['itemID'];
    ?>  

Link (one of many; I've abbreviated this section):

    <div class='row-fluid'>
        <div class='span3'>
            <a href="#customerModal" data-toggle="modal"><?php echo($info['itemCustomer']); ?></a>
        </div>
    </div>  

Modal:

<div id="customerModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel"><?php echo($info['itemID']); ?></h3>
</div>
<div class="modal-body">
    <form action='pipelineEdit.php' method='post'>
        <input placeholder='Customer Name' style='width:50%' type='text' name='editValue' id='editValue'>
        <input type='hidden' value='itemCustomer' name='editField' id='editField'>
        <input type='hidden' value='<?php echo($info['itemID']); ?>' name='itemID' id='itemID'>
        <input type='hidden' value='<?php echo($personID); ?>' name='personID' id='personID'>
</div>
          <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
          </div>
          </form>
        </div>

End of PHP while comes after modal:

    <?php } ?>

Answer 1

You are printing multiple divs with the same ID = customerModal

IDs have to be unique, so the link will only open the first modal printed in the loop.

Change:

<div id="customerModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

to:

<div id="customerModal<?php echo $info['itemID']; ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

and:

<a href="#customerModal" data-toggle="modal">

to:

<a href="#customerModal<?php echo $info['itemID']; ?>" data-toggle="modal">

Answer 2

Using

while($info=mysql_fetch_array($result)){
    $itemID = $info['itemID'];

means you keep assigning to $itemId. In the end $itemId only holds the last assigned value.

Answer 3

Your modal is identified with id. In jQuery, only the first DOM element with that id will be referenced. To reference the correct modal, you can append the database id to the element id such as:

<div id="customerModal<?php echo $info['itemID']; ?>"

The link would need to have that appended as well:

<a href="#customerModal<?php echo $info['itemID']; ?>" data-toggle="modal">

For more information using the ID selector view the jQuery documentation here .