您好,我正在处理 Bootstrap 模式中显示的弹出窗口。我正在创建在表格中显示的按钮,如下所示:
<button class = "sendbt btn btn-default" href="test.php?spz='.$row['id'].'" data-target="#myModal" data-toggle="modal"><b>Test</b></button>
因此,根据 $row['id'],表格每一行上按钮的远程内容应该不同 - 它是来自数据库的变量,表格是通过 php echo 循环创建的。 问题是我的模式弹出窗口始终显示基于我单击的第一个按钮的内容,然后在我关闭它之后,其他行中的每个其他按钮都显示相同的内容。它不会根据参数而改变。我需要重新加载页面,以在不同的按钮上显示更改的内容。有没有办法让它工作,让表格中的每个按钮都根据我的参数显示正确的内容,而无需每次都重新加载页面?
感谢您提供可能的建议。
最佳答案
执行此操作的最佳方法是向按钮添加自定义属性并从按钮中删除 href 属性...使按钮具有类型按钮并将动态 ID 分配给在行中创建的每个按钮,如下所示
<button type="button" class = "sendbt btn btn-default" data-id="$row['id']"><b>Test</b></button>
现在给按钮添加点击监听器并找到它的data-id,然后发送ajax请求并用响应更新模态内容: 编写 jquery 发送请求到 test.php 页面
$('body').on('click','.sendbt',function(){
var data-id = $(this).attr('data-id');
$.ajax({
dataType : 'html',
'type': 'GET',
'data' : {id:data-id},
'url' : 'test.php',
success : function(data){
$('#myModal tbody-content').html(data);
$('#myModal').modal('show');
},
error : function(){
console.log("There is an Error ....!")
}
});
});
在你的 Test.php 中
if(isset($_REQUEST['id'])){
$query = mysql_query("select * from table_name where id=".$_REQUEST['id']);
$row = mysql_fetch_array($query);
$content = $row['your_attribute'];
echo $content;
}
每次请求都会显示你发送的id相关的内容
关于javascript - 基于参数的 Bootstrap 模式动态远程内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41531294/