将查询结果的值传递给Modal

Question

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>

Answer 1

I change your code and create a demo:

Demo: https://jsfiddle.net/94yyar96/6/

    $(document).on('click','.btn',function(){
        var row = $(this).closest('tr');
        var name = row.find('.name').text();
        $('#moreInfo').find('#name').html(name);
        $('#moreInfo').modal('show');
    });

For pass image to modal:

    $(document).on('click','.btn',function(){
        var row = $(this).closest('tr');
        var name = row.find('.name').text();
        $('#moreInfo').find('#name').html(name);
        var img_url = row.find(".img img").attr("src"); //get image src
        $('#moreInfo').append('<img src="+img_url+">'); //create img tag in #moreInfo
        $('#moreInfo').modal('show');
    });

Optimized code:

    $(document).on('click','.btn',function(){
        var row = $(this).closest('tr');
        $('#moreInfo').find('#name').html(row.find('.name').text());
        $('#name').after('<img src="'+row.find(".img img").attr("src")+'">'); //create img tag in #moreInfo
        $('#moreInfo').modal('show');
    });

To create the image, you can use instead ‍‍‍.after() of .html() or .append() and etc.