Wert der Abfrage an Modal übergeben

Question

Ich möchte das Abfrageergebnis an Modal übergeben. Das Ergebnis enthält die Objektliste und die Beschreibung. Jede Zeile des Ergebnisses hat eine Gebotsschaltfläche. Die Schaltfläche "Bieten" öffnet das Modal mit den Informationen des Elements.

Ich möchte die Details der entsprechenden Zeile im Modell anzeigen, was ich nicht kann.

Hier ist der 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

ich den Code ändern und eine Demo erstellen:

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

Für Bild Pass zur modalen:

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

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

das Bild zu erstellen, können Sie stattdessen .after() von .html() oder .append() usw.

Answer 2

Statt var name = $row.find('.name').val(); Verwendung:

var name = $row.find('.name').text(); oder var name = $row.find('.name').html();