如何将$ _GET变量从链接传递到引导模式？

Question

摘录自我的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传递给模式的正确方法？

Answer 1

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

在上面的调用按钮所在的页面（最好在页面底部）之外，在页面的while loop外部放置以下模式HTML）>

<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模态事件监听器的替代解决方案

在模态调用按钮中，将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

在上面的调用按钮所在的页面（最好在页面底部）之外，在页面的while loop外部放置以下模式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">&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 Click功能的替代解决方案

模式呼叫按钮

<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将与具有引导程序模式事件的以上解决方案

---

将页面信息传递给模式

[在某些情况下，只需将很少的信息传递（显示）到页面上已经可用的模态，就可以通过不带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  
     });
});
 
具有Ajax和jQuery Click功能的替代解决方案...
不工作，每天浪费3/4试图使其正常工作。

Answer 2

具有Ajax和jQuery Click功能的替代解决方案...

不工作，每天浪费3/4试图使其正常工作。