modalboxの特定のIDにテキストをバインドする

Question

mysqlデータベースから3つのランダムな行をエコーするwhileループがあります。各行にはidとdescriptionが含まれています。私のフロントエンドでは、各行はIDと説明の非常に短いテキストで表示されます。各行にはブートストラップモーダルボックスを呼び出すボタンがあり、ここで長い説明を読むことができます。これは、ように見える方法です：

マイwhileループその出力ランダムIDと説明、そしてあなたは「続きを読む」働いているの罰金をクリックし、ポップアップが。しかし、modalboxでは、idに属する記述をバインドする必要があります（fx id：319はmodalboxのtesttestteをエコーする必要があります）。

私は副題の下にこの良い説明で解決を試みた： Alternate Solution with Ajax and Bootstrap Modal Event Listener、私はかなり遠くになった。

私のfile.phpで、クリックする個々のボタンのIDに属する説明を出力するselect文を作成するにはどうすればよいですか？

私がここに投稿するコードはかなり長いです。私はいくつかを短くしようとしたが、私はすべてが関係していると思う。そうでない場合は、私に頭をアップしてください。

select_shuffle.php

<!-- Everything is working in this file --> 
<?php 
    $sql = "SELECT id, description FROM stores ORDER BY RAND () LIMIT 3"; 
    $res = $mysqli->query($sql); 

    //print($res); 
    if ($res->num_rows > 0) { 
    // output data of each row 
     while($row = $res->fetch_assoc()) { 
      echo "id: " . $row["id"]. "<br>" . 
       "Description: " . $row["description"]. "<br><br>". 
       '<span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span>';    
     } 
    } else { 
    echo "0 results"; 
    } 
?> 
<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title"><center>Heading</center></h4> 
      </div> 
      <div class="modal-body"> 
       <div class="form-data"> 
        //Here Will show the Data 
       </div> 

      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default">Select</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
<script> 
$(document).ready(function() {  
    $('#myModal').on('show.bs.modal', function (e) { //Modal Event 
     var id = $(e.relatedTarget).data('id'); //Fetch id from modal trigger button 
    $.ajax({ 
     type : 'post', 
     url : 'file.php', //Here you will fetch records 
     data : 'post_id='+ id, //Pass $id 
     success : function(data){ 
     $('.form-data').html(data);//Show fetched data from database 
     } 
    }); 
    }); 
}); 
</script> 

私が説明に私の選択されたIDをバインドする方法がわからない、次のファイル？

file.php

<?php 
include 'dbconnection.php'; 

if($_POST['id']) { 
    $id = $_POST['id']; 

    $sql = "SELECT id, description FROM stores"; 

    echo $sql; 

    else { 
    echo "0 results"; 
} 

?> 

Answer 1

<button class='read-button' type='button' id="button-<?php echo $row['id'];?>">Read more</button> 

は今、あなたはボタン-319よう

$('.read-button').click(function(){console.log($(this).attr('id');});

意志出力何かのように、jQueryのセレクタを使用する場合。 data-id=319のようにボタン内に他のデータ属性を設定し、jQuery attr()を使用してそのデータを取得することもできます。要点は、クリックされたボタンを知り、IDを渡す必要があることです。