如何将$ _GET变量从链接传递到引导模式? [英] How to pass $_GET variables from a link to a bootstrapmodal?
问题描述
我的HTML代码中的代码段.
Snippet from my HTML code.
<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>
单击链接时会打开的模式:
The modual that are beeing opened when link is clicked:
<!-- 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">×</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传递到模式中的正确方法?
Is there a proper way to pass my id into the modal?
推荐答案
传递id，针对传递的id从数据库中获取记录并以模式显示的简单解决方案是;
The simple solution to pass id, fetch records from database against passed id and show in modal is;
简单解决方案
模式呼叫按钮
<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外部(最好在页面底部)
Put following modal HTML outside the while loop in page where the above call button is located (preferable at bottom of page)
<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
Now Create a PHP file and name it 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">×</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>
要删除模式中的数据或换句话说在打开下一个记录而不刷新页面时刷新模式，请使用以下脚本
To remove the data inside modal or in other words to refresh the modal when open next records without page refresh, use following script
将其放在jQuery和Bootstrap库之后(请记住jQuery&Bootstrap库始终排在第一位)
Put it after jQuery and Bootstrap library (Remember jQuery & Bootstrap libraries always come first)
<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;?>"，以便我们使用引导模式事件
In Modal Call button replace href="file.php?id=<?php echo $obj->id;?> with data attribute data-id="<?php echo $obj->id;?>" so we pass the id of row to modal using bootstrap modal event
<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外部(最好在页面底部)
Put following modal HTML outside the while loop in page where the above call button is located (preferable at bottom of page)
<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">×</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>
现在在同一页面中添加以下脚本；
Now Add following script in same page;
<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方法中的用法相同)
Now Create a PHP file and name it file.php (same as use in Ajax Method)
<?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
}
?>
在此解决方案中，您不需要以下脚本即可删除模式中的数据或换句话说来刷新模式
In this solution, you don't need following script to remove the data inside modal or in other words to refresh the 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
Put following modal HTML in page where above modal call button located (preferable at bottom of page)
<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">×</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&已找到模态调用按钮.
following Ajax method code in same page where Modal HTML & Modal call button located.
<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将与带有引导模式事件的上述解决方案相同
And the PHP file file.php will be same as the above solution with bootstrap modal event
将页面信息传递给模式
在某些情况下，只需要将很少的信息传递(显示)到页面上已经可用的模态，只需使用引导模态事件即可完成，而无需使用Ajax Method和data-attributes
In some cases, only need to pass (display) minimal information to modal which already available on page, can be done with just bootstrap modal event without Ajax Method with 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
});
});
这篇关于如何将$ _GET变量从链接传递到引导模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
