フォームからデータを取得し、ブートストラップモーダルで表示する

Question

データ属性が付いた行がいくつかあります。私は別のフォームにデータ属性を送信する各テーブルの行をクリックして、モーダル

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <div class="col-md-3"> 
     <div class="img-container medium" style="overflow: hidden; position:relative;margin-left:-13px;"> 
     <img class="loaded" src="img/a.jpg" style="width: auto; height: 245px; top:0px; left:-66px;"> 
     </div> 
    </div> 

    <div class="col-lg-4 col-md-3 col-sm-4"> 
     <div class="namasm">kamar</div> 
     lorem ipsum 
     <div class="clearfix mt10"> 
     <span class=""></span> 
     </div> 
    </div> 

    <div class="col-lg-2 col-md-2 col-sm-3 text-center sep"> 
     <div class="price"> 
     <span>$20</span> 
     </div> 
     <div class="mb10 text-muted" id="bb">Price/1 night(s)</div> 
     Capacity : 
     <i class="glyphicon glyphicon-user"></i> 
     x2 
     <p class="lead pt10"> 
     <button class="btn btn-success btn-lg btn-block" id="kklik" data-name="kamar" data-toggle="modal" data-target="#modalInfo"> 
      <i class="glyphicon glyphicon-hand-right"></i> 
      Book 
     </button> 

     </p> 

    </div> 

<div id="modalInfo" class="modal fade" aria-hidden="true" role="dialog" aria-labelledby="modalInfoLabel"> 
    <div class="modal-dialog modal-lg"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 class="modal-title">Booking</h4> 
     </div> 
     <div class="modal-body"> 
     <!-- php file --> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 

でフォームを表示するとき、私はこの（get data attribute and show in bootstrap modal）を試みたが、それは動作しません。

Answer 1

$('#fileInfo tr td').on('click', function(){ 
     var data = $(this).closest('tr').attr('data-name'); 
     $('#modalInfo').modal('show'); 
     $('#modalInfo').find(".filename").html(data);; 
    }); 

データトグル=「モーダル」データ・ターゲット=「＃modalInfo」あなたはこのようにすることができ、テーブル要素

Answer 2

からこれを削除します。その作業JSFIDDLE DEMO

<div class="col-md-12"> 
    <table class="table table-bordered"> 
     <thead> 
      <tr> 
       <th>Your ID</th> 
       <th></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr id="modal-1"> 
       <td>Modal Title 1</td> 
       <td class="text-right"><button class="btn btn-danger btn-xs" data-id="1" data-title="Modal Title 1" id="check">x</button></td> 
      </tr> 
      <tr id="modal-2"> 
       <td>Modal Title 2</td> 
       <td class="text-right"><button class="btn btn-danger btn-xs" data-id="2" data-title="Modal Title 2" id="check">x</button></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button class="close" data-dismiss="modal" type="button">&times;</button> 
       <h4 class="modal-title">Modal by ID</h4> 
      </div> 
      <div class="modal-body"> 
       <p id="content"></p> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-default" data-dismiss="modal" type="button">CANCEL</button> 
      </div> 
     </div> 
    </div> 
</div> 

---

$('button#check').on('click', function(e) { 
    e.preventDefault(); 
    var id = $(this).data('id'); 
    $('#myModal').data('id', id).modal('show'); 
     $("#content").html($(this).data("title")); 
});