ブートストラップモードの動的コンテンツを表示するONCLICKイベント

Question

mySQLデータベースから生成されたリストを含むテーブルがあります。各レコードには、それに対応するビューボタンがあります。誰かがビューボタンをクリックすると、ブートストラップモーダルポップアップに行情報を表示したい。

問題 最初のクリックではポップアップモーダルが表示されません。 2回目のクリックでモーダルが表示されます。また、モーダルを閉じて別のビューボタンをクリックした後、モーダルは前に選択したコンテンツを表示します。

問題を解決するための代替方法はありますか？

マイホームページjqueryの

<div class="modal-container"></div> <table width="100%" border="1"> <?php for($i=1;$i<=10;$i++){ ?> <tr> <td>Name</td> <td>Location</td> <td><a data-toggle="modal" href="#myModal" onclick="showmodal("<?=$i;?>","row_<?=$i;?>")">View</a></td> </tr> <?php } ?> </table> 

のような - >

function showmodal(id,category){ 
    var url = "remote.php"; 
    $('.modal-container').load(url,{var1:id,var2:category},function(result){ 


      $('#myModal').modal({show:true}); 
    }); 
} 

remote.php

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Sample Model Box - Header Area</h4> 
      </div> 
      <div class="modal-body"> 
       <?php 
       echo $_REQUEST['var1']; 
       echo $_REQUEST['var2']; 
       ?> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save</button> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

ショーは、モーダルload ajax content

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Sample Model Box - Header Area</h4> 
      </div> 
      <div class="modal-body"> 

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

<table width="100%" border="1"> 
    <?php 
    for($i=1;$i<=10;$i++){ 
    ?> 
    <tr> 
     <td>Name</td> 
     <td>Location</td> 
     <td><a data-toggle="modal" data-target="#myModal" href="#myModal" data-id="<?=$i;?>" data-category="<?=$i;?>">View</a></td> 
    </tr> 
    <?php 
} 
?> 
</table> 

<script type="text/javascript"> 

$('#myModal').on('show.bs.modal', function (event) { 
    var clickedLink = $(event.relatedTarget); // clickedLink that triggered the modal 
    var id = clickedLink.data('id'); // Extract info from data-id attributes 
    var category = clickedLink.data('category'); // Extract info from data-category attributes 
    var modal = $(this); 
    modal.find('.modal-body').load('remote.php',{var1:id,var2:category}); 
}); 
</script>