将PHP变量传递给bootstrap模式

时间:2016-01-09 13:11:19

标签: php jquery mysql twitter-bootstrap mysqli

我有一个使用while循环创建的按钮。所以while循环为mysql表中的每一行创建一个表行。

我有一行按钮代码,为表格的每一行再次创建,每个按钮根据该记录的id具有不同的值。

$order .= '<td><a href="#myModal" class="btn btn-default btn-small" id="custId" data-toggle="modal" data-id="'.$row['ID'].'">Edit</a></td>';

问题是我想使用$row['ID']并以模态查看它,这样我就可以使用mysqli查询检索具有相同ID的记录。

以下是模态的代码。

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Edit Data</h4>
                </div>
                <div class="modal-body">
                    i want to save the id in a variable here so i can use it in a php script for this modal
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

3 个答案:

答案 0 :(得分:16)

把它放在你的循环中

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#message<?php echo $row['id'];?>">Message</button>
<div id="message<?php echo $row['id'];?>" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
        <?php echo $row['id'];?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

答案 1 :(得分:15)

如果,我告诉你了。

带有$row['ID']

的模态触发按钮
$order .= '<td><a href="#myModal" class="btn btn-default btn-small" id="custId" data-toggle="modal" data-id="'.$row['ID'].'">Edit</a></td>';

使用Ajax方法

获取$row['ID']值的Bootstrap Modal事件
$(document).ready(function(){
    $('#myModal').on('show.bs.modal', function (e) {
        var rowid = $(e.relatedTarget).data('id');
        $.ajax({
            type : 'post',
            url : 'fetch_record.php', //Here you will fetch records 
            data :  'rowid='+ rowid, //Pass $id
            success : function(data){
            $('.fetched-data').html(data);//Show fetched data from database
            }
        });
     });
});

模态HTML

<div class="modal fade" id="myModal" role="dialog">
    <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">Edit Data</h4>
            </div>
            <div class="modal-body">
                <div class="fetched-data"></div> //Here Will show the Data
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

上次创建fetch_record.php,检索记录并以模态显示

<?php
//Include database connection
if($_POST['rowid']) {
    $id = $_POST['rowid']; //escape string
    // Run the Query
    // Fetch Records
    // Echo the data you want to show in modal
 }
?>

答案 2 :(得分:1)

在一个循环中添加模式可以在不需要时自动复制html内容!最好不要在循环中为每个项目添加模式,而仅在需要时才调用数据!

这是一个示例,将以下按钮添加到php中的循环

<button data-id="<?php echo $note['id']; ?>"  onclick="$('#dataid').text($(this).data('id')); $('#showmodal').modal('show');">Click me </button>

在模态上,您可以知道使用该ID向您的数据库或任何json发出请求

示例假设您正在使用名为showmodal的模式,请使用此信息向您的数据库或所需的类或函数发出新请求!

<?php $dataid = '<span id="dataid"/>'; echo $dataid; ?>

echo $ dataid仅向您显示循环中单击的项目的ID确实有效。

正如您在这里看到的那样,我们仅在循环中添加1个单个html模板,并且我们仅在被请求时才调用数据!这样可以节省内存,并且速度更快。

我希望这可以帮助很多人