doue9730
2016-10-11 09:39
采纳率: 100%
浏览 80
已采纳

将查询结果的值传递给Modal

I want to pass query result to Modal. The result contains Item list and description Each row of the result has a bid button. Bid button opens the modal containing information of the item.

I want to display the details of the corresponding row in the model, which I am not able to.

Here is the code.

<div class="col-lg-12">
<center>
 <table class="auction_det" style="width:100%;" border="1">
 <th>ID</th>
    <th>Item Name</th>
    <th>Description</th>
    <th>Cost</th>
    <th>Current Bid</th>
    <th>Close Date</th>
    <th>Image</th>
  <?php
    if( !empty($results) ) 
    {

    foreach($results as $row) {

    echo '<tr>';
    echo '<td id="id">'.$row->item_id.'</td>';
    echo '<td class="name">'.$row->name.'</td>';
    echo '<td class="desc">'.$row->item_desc.'</td>';
    echo '<td class="cost">'.$row->item_cost.'</td>';
    echo '<td class="open">'.$row->open_date.'</td>';
    echo '<td class="date">'.$row->close_date.'</td>';
    echo '<td class="img"><center><img style="width:300px;height:100px;"src='.$row->img_path.'></center></td>';
    ?>
    <td><button type="button" class="btn" data-toggle="modal" data-target="#moreInfo">Bid</button></td><?php    
    echo '</tr>';

}
}
?>
</table>

Script

<script>
    $(document).ready(){
        $('.btn').click(function(){
            var $row = $(this).closest('tr');
            var name =  $row.find('.name').val();
            $('#name').text(name);
            $('#moreInfo').modal('show');
        });
    });//END document.ready
</script>

Modal

 <div class="modal fade" tab-index="-1" id="moreInfo" role="dialog" aria-labelledby="moreInfoLabel" aria-hidden="true">
       <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <h3>Item Details</h3>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="moreInfoLabel"></h4>
           </div>
          <div="modal-body">
        <p>Name:<label id="name"> *QUERY RESULT HERE* </label></p>
</div>
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

2条回答 默认 最新

相关推荐 更多相似问题