【问题标题】:Pass PHP variable to bootstrap modal将 PHP 变量传递给引导模式
【发布时间】:2016-04-14 03:05:09
【问题描述】:

我有一个使用 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>

【问题讨论】:

  • 模型在同一页吗?
  • @PathikVejani 是的,它在同一页面上
  • 使用我给的链接
  • @PathikVejani 我已经尝试过了,但无法让它工作

标签: php jquery mysql twitter-bootstrap


【解决方案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 模板,而且我们也只在请求数据时调用它!这将节省内存,也将更快。

希望对很多人有帮助

【讨论】:

    【解决方案2】:

    把它放在你的循环中

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

    【讨论】:

    • 太棒了。无需使用 JS 或 AJAX 即可实现。您应该为此获得更多支持。非常感谢!
    • 解决了一个非常大的问题,您的方法给出了一个想法,可以在代码中进行一些曲折。谢谢!
    • 一个或两个记录的好选择...查询返回有很多记录的任何选项?这种方法会为每条记录生成模态代码,这将是多余的。对此有何建议?
    • 尝试了很多使用 Jquery、ajax 和 javascript 传递数据的方法,但都没有奏效。然后你没有所有这些,它就起作用了。惊人的!谢谢。
    • 太棒了,如此简单但目的明确,易于定制。非常感谢.....
    【解决方案3】:

    如果我猜对了。

    带有$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'] 值的引导模式事件

    $(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
     }
    ?>
    

    【讨论】:

    • 这看起来正是我要找的东西,但是它说第 3 行有一个未定义的索引:id,即 if($_POST['id'] {
    • 将 if($_POST['id']) { 更改为 if($_POST['rowid']) { 只是一个拼写错误
    • 我以前使用过这种技术,效果很好。但是一旦我更新到 Bootstrap 4,模式就会打开但不会关闭!有没有其他人看到这种情况发生?
    • @Mark 您需要使用浏览器控制台检查页面或检查模式可能是一些旧的 css 或自定义 css 导致问题,BS4 模式没有重大变化期望一些 css 更改带来模式在屏幕中心或动态高度选项,getbootstrap.com/docs/4.0/components/modal
    猜你喜欢
    • 2015-01-27
    • 2014-01-05
    • 2020-08-03
    • 2016-04-03
    • 2020-08-19
    • 2015-11-17
    • 1970-01-01
    • 1970-01-01
    • 2023-03-18
    相关资源
    最近更新 更多