jquery - Passing php variable to modal twitter bootstrap not working

Question

Hi I'm passing php variable to twitter boostrap modal. but I cant get the right id when I click the link inside the modal. please see code below. first I have created a foreach function where data loops second I have created a link to show the modal 3rd I have actions link inside the modal where user can update, delete the data. what I have achieve already is that I can pass the variable of php going to modal actions, but when I try to other rows it shows the same id still.

  <table class="table table-condensed table-bordered table-striped volumes">
    <thead>
      <tr>
        <th>ID</th>
        <th>Director</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>


<?php

        foreach ($natcco_members as $nattco) {

        $id = $nattco['id'];
        echo "<tr>
              <td>".++$counter."</td>
              <td>".$nattco['director']."</td>
              <td><a href='#' class='b'>".$nattco['agent_name']."</a></td>
              <td>".$nattco['address']."</td>
             </td>";

?>

<!-- Modal HTML -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Choose your actions!</h4>
            </div>
            <div class="modal-body" align="center">
                                <a href='update_sub_agent.php?id=<?php echo urlencode(htmlspecialchars($id)) ?>' class='btn btn-success'><i class='icon-pencil'></i> Edit</a> 
                                <a href='owner.php?id=".urlencode(htmlspecialchars($id))."' class='btn btn-info'><i class='icon-user'></i> Owner</a> 
                                <a href='fla.php?id=".urlencode(htmlspecialchars($id))."' class='btn btn-warning'><i class='icon-list-alt'></i> FLA</a>  
                                <a href='delete.php?id=".urlencode(htmlspecialchars($id))."' class='btn btn-danger'><i class='icon-remove'></i> Delete</a> 
           </div>
            <div class="modal-footer">

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

          <?php "</tr>";

    }
}
?>

</tbody>
</table> 

Answer 1

I have made quite some edits to your code, let's start with what you were doing first:

1. <td>".$nattco['address']."</td> </td>";

   This has to be </tr> instead of </td>.

2. You only need one modal box. We will pass the id for them through jQuery. So create only 1 static modal box at the end of your table.

Now the things you need to do:

1) Make use of this $id = $nattco['id']; as your <tr id> so it will be:

 $id = $nattco['id'];
 echo "<tr id='".urlencode(htmlspecialchars($id))."'> #...rest of your code

2) Give a class for your buttons in the modal box:

<a href='update_sub_agent.php' class='btn btn-success edit'><i class='icon-pencil'></i> Edit</a>
                                                 <!-- ^edit class added -->
<a href='owner.php' class='btn btn-info owner'><i class='icon-user'></i> Owner</a>
                                   <!-- ^owner class added -->
<a href='fla.php' class='btn btn-warning fla'><i class='icon-list-alt'></i> FLA</a> 
                                    <!-- ^fla class added -->
<a href='delete.php' class='btn btn-danger delete'><i class='icon-remove'></i> Delete</a>
                                      <!-- ^delete class added -->

3) Add href and class to your` tag :

`<td><a href='#myModal' class='b modal-box'>".$nattco['agent_name']."</a></td>`

And finally, the jQuery bit:

$('a.modal-box').click(function(e){
   id=$(this).closest('tr').attr('id');
   $('.modal-body .edit').attr('href','update_sub_agent.php?id='+id+'');
   $('.modal-body .owner').attr('href','owner.php.php?id='+id+'');
   $('.modal-body .fla').attr('href','fla.php?id='+id+'');
   $('.modal-body .delete').attr('href','delete.php?id='+id+'');
});

That's all. This minimizes your code so that modal box is not repeated while dynamically passing id of the clicked row.

You can have a look a the demo here:

DEMO