php - 在 Bootstrap 模式 ONCLICK 事件中显示动态内容

Question

我有一个表，其中包含从 mySQL 数据库生成的列表。每条记录都有一个对应的查看按钮。当有人点击 View 按钮时，我想在 Bootstrap 模式弹出窗口中显示行信息。

问题第一次点击时不显示弹出模式。模态显示在第二次点击时。此外，在关闭模态框并单击另一个 View 按钮后，模态框会显示先前选择的内容。

是否有其他解决方案来克服这个问题？

我的主页喜欢

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

jquery -->

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

显示模态然后加载ajax内容

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