Question

我希望用户能够点击一个表，并根据他们点击的行 - 它将填充模式与该行相关的内容（MYSQL查询），并打开模态。

我试图像下面这样做： - 加载表格内容 - 使用jQuery单击表时监听 - 使用AJAX通过点击的行信息发布到PHP文件 - 使用行信息执行MYSQL查询 - 使用收集的内容填充模态 - 打开模态

我遇到的问题是因为它是一个MYSQL语句并且该函数是非阻塞的，所以变量尚未在模态开始时被声明。网络编程并不完全是我的强项，所以我确信我错过了一些简单的东西。

提前致谢！

编辑：

的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，因为模式已加载。

Answer 1

好的，这是我在这个问题上的实现，只提供基础知识并让你相应地编辑自己的代码会更简单。

首先，我的整个模态内容是一个id为<div id="modalcontent"> </div>

的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>，然后切换模式。此方法还可以确保仅在数据被提取后打开模态，因此在没有数据的情况下打开模态是不可能的。

使用PHP和AJAX填充模态内容？

1 个答案: