php - 如何将 $GET 变量从链接传递到 Bootstrap 模式？

我的 HTML 代码片段。

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a href="#" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-book-id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

点击链接时打开的模块:

<!-- Modal -->
    <div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            <?php var_dump($_GET)?>
          </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 changes</button>
          </div>
        </div>
      </div>
    </div>

是否有将我的 id 传递到模态中的正确方法？

最佳答案

通过 id 的简单解决方案, 从数据库中根据传递的 id 获取记录并以模式显示是；

简单的解决方案

模态调用按钮

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" href="file.php?id=<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

模态 HTML

将以下模态 HTML 放在 while loop 之外在上面调用按钮所在的页面中(最好在页面底部)

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
          //Content Will show Here
        </div>
    </div>
</div>

现在创建一个 PHP 文件并将其命名为 file.php

此文件使用模态调用按钮调用 href="file.php?id=<?php echo $obj->id;?>"

<?php
//Include database connection here
$Id = $_GET["id"]; //escape the string if you like
// Run the Query
?>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title"><center>Heading</center></h4>
</div>
<div class="modal-body">
    //Show records fetched from database against $Id
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default">Submit</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

要删除模态内的数据，或者换句话说，在不刷新页面的情况下打开下一条记录时刷新模态，请使用以下脚本

将它放在 jQuery 和 Bootstrap 库之后(记住 jQuery 和 Bootstrap 库总是放在第一位)

<script>
$( document ).ready(function() {
    $('#editBox').on('hidden.bs.modal', function () {
          $(this).removeData('bs.modal');
    });
});
</script>

使用 Ajax 和 Bootstrap 模式事件监听器的替代解决方案

在 Modal Call 按钮中替换 href="file.php?id=<?php echo $obj->id;?>具有数据属性 data-id="<?php echo $obj->id;?>"所以我们使用 bootstrap modal event 将行的 id 传递给模态

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

模态 HTML

将以下模态 HTML 放在 while loop 之外在上面调用按钮所在的页面中(最好在页面底部)

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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"><center>Heading</center></h4>
            </div>
            <div class="modal-body">
                <div class="form-data"></div> //Here Will show the Data
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default">Submit</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

现在在同一页面添加以下脚本；

<script>
//jQuery Library Comes First
//Bootstrap Library
$( document ).ready(function() {       
    $('#myModal').on('show.bs.modal', function (e) { //Modal Event
        var id = $(e.relatedTarget).data('id'); //Fetch id from modal trigger button
    $.ajax({
      type : 'post',
       url : 'file.php', //Here you will fetch records 
      data :  'post_id='+ id, //Pass $id
      success : function(data){
         $('.form-data').html(data);//Show fetched data from database
       }
    });
    });
});
</script>

现在创建一个 PHP 文件并将其命名为 file.php (与 Ajax 方法中的用法相同)

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

在此解决方案中，您不需要以下脚本来删除模态内的数据或换句话说刷新模态

$('#editBox').on('hidden.bs.modal', function () {
      $(this).removeData('bs.modal');
});

使用 Ajax 和 jQuery 点击功能的替代解决方案

模态调用按钮

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" class="open-modal" href="" id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

将以下模态 HTML 放在页面中模态调用按钮上方的位置(最好在页面底部)

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="form-data"></div> //Here Will show the Data
            </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 changes</button>
            </div>
        </div>
    </div>
</div>

在模态 HTML 和模态调用按钮所在的同一页面中遵循 Ajax 方法代码。

<script>
//jQuery Library Comes First
//Bootstrap Library
$( document ).ready(function() { 
  $('.open-modal').click(function(){
    var id = $(this).attr('id');
    $.ajax({
      type : 'post',
       url : 'file.php', //Here you should run query to fetch records
      data : 'post_id='+ id, //Here pass id via 
      success : function(data){
          $('#editBox').show('show'); //Show Modal
          $('.form-data').html(data); //Show Data
       }
    });
  });
});
</script>

和 PHP 文件 file.php将与上述带有 Bootstrap 模式事件的解决方案相同

将页面信息传递给 Modal

在某些情况下，只需要将最少的信息传递(显示)到页面上已经可用的模态，只需 Bootstrap 模态事件即可完成，无需 Ajax Method与 data-attributes

<td>
  <span data-placement="top" data-toggle="tooltip" title="Show">
    <a data-book-id="<?php echo $obj->id;?>" data-name="<?php echo $obj->name;?>" data-email="<?php echo $obj->email;?>" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox">
    <span class="glyphicon glyphicon-pencil"></span>
    </a>
  </span>
</td>

模态事件

$(document).ready(function(){
    $('#editBox').on('show.bs.modal', function (e) {
        var bookid = $(e.relatedTarget).data('book-id');
        var name = $(e.relatedTarget).data('name');
        var email = $(e.relatedTarget).data('email');
        //Can pass as many onpage values or information to modal  
     });
});

关于php - 如何将 $GET 变量从链接传递到 Bootstrap 模式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32433765/

php - 如何将 $GET 变量从链接传递到 Bootstrap 模式？

上一篇：performance - 覆盖使 emacs 真的很慢

下一篇：triggers - 在 Active Directory 更改时运行脚本