我希望用户能够点击一个表,并根据他们点击的行 - 它会用与该行相关的内容填充模式(MYSQL 查询),然后打开模式。
我尝试过如下操作: - 加载表格内容 - 收听何时使用 jQuery 单击表格 - 使用 AJAX 将点击行的信息发布到 PHP 文件 - 使用行信息执行 MYSQL 查询 - 用收集到的内容填充模态 - 打开模态
我遇到的问题是,因为它是一个 MYSQL 语句并且函数是非阻塞的,所以在模态开始打开时变量还没有声明。 Web 编程并不是我的强项,所以我确定我错过了一些简单的东西。
提前致谢!
编辑:
jQuery/AJAX
$('#alerts tbody').delegate('tr', 'click', function() {
var id = $('td:eq(0)', this).text(); // Gets the ID of the row
// PHP Method (below)
// Passes ID through to PHP
$.ajax({
url: "alerts.php",
method: "GET",
data: {id: ID},
async: true,
done: function() {
loadModalFunction();
}
});
});
PHP
<?php
if (!empty($_GET['id'])) {
// MYSQL Query
// Sets global variables
}
?>
模态
$('#info').find('.modal-title').text("Information (#" + id + ")");
$('#info').find('#modal-body-content').text("<?php echo $GLOBALS['content'];?>");
我知道传递 ID 和获取内容是有效的,但是内容不会传递给 ID,因为在脚本初始化全局变量之前加载模态。
最佳答案
好的,这是我在这个问题上的实现,只提供基础知识并让您相应地编辑自己的代码会更简单一些。
首先,我的整个模态内容是一个带有 id 的 div,<div id="modalcontent"> </div>
然后,假设这个按钮应该打开并用数据填充我的模态
<a href="#" onclick="openModal()">Open</a>
openModal() 看起来像这样
$.post("alerts.php", {
id: ID
}, function(data) {//data will contain whatever alerts.php prints
document.getElementById("modalcontent").innerHTML = data;//insert data into modal
$('#my-modal').modal('toggle');//open modal
});
同样,有很多方法可以做到这一点。有更好的方法可以做到这一点。但是您应该了解这样的工作原理,您只能在 javascript 中获取 PHP 文件的输出并使用 javascript 编辑您的内容。您可以从另一个 PHP 脚本获取您的数据,该脚本将在您需要时由 javascript 执行,但 PHP 脚本本身不能修改您已加载页面的内容。
使用此代码并假设 alerts.php 将 echo "you have a notification";
, <div id="modalcontent"> </div>
将更改为 <div id="modalcontent">you have a notification</div>
然后模式将被切换。此方法还确保模态框仅在获取数据后打开,因此如果没有内部数据,模态框就不可能打开。
关于javascript - 使用 PHP 和 AJAX 填充模态内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35656972/