クエリ結果の値をModalに渡す

Question

クエリ結果をModalに渡したいとします。結果にはアイテムリストと説明が含まれます 結果の各行には入札ボタンがあります。入札ボタンは、アイテムの情報を含むモーダルを開きます。

私はできないモデルの対応する行の詳細を表示したいと思います。

ここにコードがあります。代わりにvar name = $row.find('.name').val();使用の

<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> 
    $(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> 

モーダル

<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

私はあなたのコードを変更してデモを作成します。

デモ：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'); 
    }); 

パス画像は、モーダルにするために：

$(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'); 
    }); 

最適化されたコード：

$(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'); 
    }); 

イメージを作成するには、代わりに.after().html()のか.append()とを使用することができるなど

Answer 2

：

var name = $row.find('.name').text();またはvar name = $row.find('.name').html();