[英]How to pass $_GET variables from a link to a bootstrapmodal?
Snippet from my HTML code.来自我的 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>
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>
Is there a proper way to pass my id into the modal?有没有正确的方法可以将我的 id 传递到模态中?
The simple solution to pass id
, fetch records from database against passed id
and show in modal is;传递
id
,根据传递的id
从数据库中获取记录并以模式显示的简单解决方案是;
Simple Solution简单的解决方案
Modal Call button模态呼叫按钮
<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>
Modal HTML模态 HTML
Put following modal HTML outside the while loop
in page where the above call button is located (preferable at bottom of page)将以下模态 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>
Now Create a PHP file and name it file.php
现在创建一个 PHP 文件并将其命名为
file.php
This file is called with modal call button href="file.php?id=<?php echo $obj->id;?>"
使用模态调用按钮
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要在没有页面刷新的情况下打开下一条记录时删除模态内的数据或换句话说刷新模态,请使用以下脚本
Put it after jQuery and Bootstrap library (Remember jQuery & Bootstrap libraries always come first)把它放在 jQuery 和 Bootstrap 库之后(记住 jQuery 和 Bootstrap 库总是排在最前面的)
<script>
$( document ).ready(function() {
$('#editBox').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
});
</script>
Alternate Solution with Ajax and Bootstrap Modal Event Listener使用 Ajax 和 Bootstrap 模态事件侦听器的替代解决方案
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在模态调用按钮中,用数据属性
data-id="<?php echo $obj->id;?>"
替换href="file.php?id=<?php echo $obj->id;?>
data-id="<?php echo $obj->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" data-id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>
Modal HTML模态 HTML
Put following modal HTML outside the while loop
in page where the above call button is located (preferable at bottom of page)将以下模态 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">×</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>
Now Create a PHP file and name it file.php
(same as use in Ajax Method)现在创建一个 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
}
?>
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');
});
Alternate Solution with Ajax and jQuery Click function使用 Ajax 和 jQuery Click 功能的替代解决方案
Modal Call button模态呼叫按钮
<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>
Put following modal HTML in page where above modal call button located (preferable at bottom of page)将以下模态 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">×</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>
following Ajax method code in same page where Modal HTML & Modal call button located.在模态 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>
And the PHP file file.php
will be same as the above solution with bootstrap modal event并且 PHP 文件
file.php
将与上述解决方案相同,带有 bootstrap modal 事件
Pass On page information to Modal将页面信息传递给 Modal
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
在某些情况下,只需要将最少的信息传递(显示)到页面上已经可用的模态,只需引导模态事件即可完成,无需带有
data-attributes
Ajax Method
<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>
Modal Event模态事件
$(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
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.