在模态引导中使用jquery或javascript传递数据

Question

I have a table that represented from SQL Table that looping all data with PHP.

HTML

<tbody>
   <?php
    $no = 1;
    foreach($data_request as $data) {
    ?>

  <tr>
    <td class="center"><?php echo $no++.". ";?> </td>                                           
    <td class="sorting1"><?php echo $data['id_request'];?> </td>
    <td class="center"><?php echo "$nama"; ?></td>                               
    <td  class="right">
       <a class="btn btn-danger" href="#">
         <i class="halflings-icon white trash"></i> Close</a>
       <a class="btn btn-success" href="#" id="print"?>">
         <i class="halflings-icon pencil"></i> Preview  </a>         
   </td>
  </tr>

   <?php } ?>
   </tbody>
   </table>  


  <div class="modal hide fade" id="myModal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Print Preview</h3>
        </div>
        <div class="modal-body">

            /*This would be a preview*/


        </div>
        <div class="modal-footer">
             <a href="#" class="btn btn-primary">Make it to PDF</a>
            <a href="#" class="btn" data-dismiss="modal">Close</a>

        </div>
    </div>

My problem is, I wanna display a row data to modal bootstrap if users clicked the preview button. So, if user click the button in row 1, modal would be displaying all field/data in first row of table. Untill now, I have success passing data using jquery like this :

 <script>
        $('.btn-success').click(function(){
            var address = [];
                $(this).closest('tr').find('td').not(':last').each(function() {

                var textval = $(this).text(); // this will be the text of each <td>
                address.push(textval);
            });

            alert(address.join('\n'));
        });

    </script>

I am confusing to pass the data from script to modal, anyone can help ?

Answer 1

Better to give unique ids to the rows while rendering it from SQL DB.

<tbody>
   <?php
    $no = 1;
    foreach($data_request as $data) {
    ?>

  <tr id="row_<?php echo $data['id_request']; ?>">
    <td class="center"><?php echo $no++.". ";?> </td>                                           
    <td class="sorting1"><?php echo $data['id_request'];?> </td>
    <td class="center"><?php echo "$nama"; ?></td>                               
    <td  class="right">
       <a class="btn btn-danger" href="#">
         <i class="halflings-icon white trash"></i> Close</a>
       <a class="btn btn-success" href="#" id="print_<?php echo $data['id_request']; ?>"">
         <i class="halflings-icon pencil"></i> Preview  </a>         
   </td>
  </tr>

   <?php } ?>
   </tbody>
   </table>  


  <div class="modal hide fade" id="myModal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Print Preview</h3>
        </div>
        <div class="modal-body">

            /*This would be a preview*/


        </div>
        <div class="modal-footer">
             <a href="#" class="btn btn-primary">Make it to PDF</a>
            <a href="#" class="btn" data-dismiss="modal">Close</a>

        </div>
    </div>

Script:

<script>
        $('.btn-success').click(function(){
            var address = [];
            var trId = $(this).attr('id').split('_')[1];

            $('#row_'+trId).find('td').each (function() {
                address.push($(this).text());

           });
           alert(address.join('\n'));
           $('#myModal > .modal-body').html(address.join('\n'));
           $('#myModal').modal('show');
        });

    </script>